我正在尝试将图像在父流体容器内垂直居中。
Here is a fiddle that outlines the problem.
<div class="container-fluid">
<div class="row">
<div class="col-md-2 col-sm-4 col-xs-4 col-xxs-4">
<div class="">
<a href="#"><img id="logo" class="img-responsive" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRnfIk3IX1dY-okcqPH5BX_L0XF2z31qwP-MD0nijTdAGc2alNc4Q" style="vertical-align: middle;" alt="logo here"/></a>
</div>
</div>
<div class="col-md-10 col-sm-8 col-xs-8 col-xxs-8">
<div class="row">
<div class="col-md-12">
<div class="">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#" style="color: #1B75BB;">Search</a>
</li>
<li><a href="#" style="color: #1B75BB;">Archives</a>
</li>
<li><a href="#" style="color: #1B75BB;">About</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
如您所见,图像水平居中,但垂直居中。做诸如设置边距之类的事情,即使是父容器的边距,似乎也不起作用。这感觉应该很容易解决,但我正在努力解决。
最佳答案
有两种方法可以使元素在其他元素中垂直居中,这两种方法都取决于父容器的样式。一种是设置行高与容器高度相同,另一种是使用表格单元格:
img {
height: 25px;
width: 25px:
}
.container {
height: 50px;
width: 50px;
text-align: center;
border:1px solid;
}
.one {
line-height: 50px; /* Same as container height */
}
.container.two {
display:table-cell;
vertical-align:middle;
}
<div class="container one">
<a href="#">
<img class="img-responsive" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRnfIk3IX1dY-okcqPH5BX_L0XF2z31qwP-MD0nijTdAGc2alNc4Q" style="vertical-align: middle;" alt="logo here" />
</a>
</div>
<br />
<div class="container two">
<a href="#">
<img class="img-responsive" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRnfIk3IX1dY-okcqPH5BX_L0XF2z31qwP-MD0nijTdAGc2alNc4Q" style="vertical-align: middle;" alt="logo here" />
</a>
</div>
关于javascript - 图像在父行中垂直居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31542483/