在Bootstrap 3中获取垂直对齐的图像

Question

我已经尝试了在stackoverflow上发布的各种其他解决方案，这些解决方案对其他人有效，但不幸的是，我无法让图像正确地垂直居中。我希望有人能弄清楚我们需要什么。

这是顶部导航栏的右上角，我设置了红色边框以便于查看。我希望右边的照片在集装箱内垂直居中，因为你可以从照片下面的间隙看到它不是垂直居中的。

请注意:我可以在图像上使用position:relative；bottom:-5px；让它工作，但我想知道是否有其他/更好的方法。

​

​

HTML：

<div id="nav-userOptions" class="col-xs-4">
   <div class="row">
      <a href="#">
         <div class="col-xs-6" ng-click="create_show=true" style="border:1px solid red;">
            <div  style="height:60px">
               <i class="fa fa-plus-circle" style="font-size:60px; border:1px solid red;"></i> 
            </div>
            <div>
               Create
            </div>
         </div>
      </a>
      <a href="#">
         <div class="col-xs-6" style="border:1px solid red;"  >
            <div style="height:60px; vertical-align:middle; float:none; display:inline-block; border:1px solid red;">
               <img   src="img/loggedIn/profilePic.jpg" height="52" width="52" style="border:1px solid red">
            </div>
            <div>
               Account
            </div>
         </div>
      </a>
   </div>
</div>
<!-- end nav-userOptions -->

CSS：

#nav-userOptions {
    text-align: center;
    color:#20a0d8;
}

#nav-userOptions a {
    color:#20a0d8;
}

Answer 1

您可以尝试对img应用line-height: 60px。

或者，另一种解决方案：

img {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%);
}

Answer 2

添加css样式的display:table-cell？如果您定义了图像容器的高度，它就会起作用

div.img-container{
       display:table-cell;
       vertical-align: middle; 
       height: 60px;
    }

Answer 3

您可以尝试使用css。

img{
 vertican-align:middle;
}