在Bootstrap 3中垂直对齐图像

Question

我已经尝试过在stackoverflow上发布的其他解决方案，这些解决方案适用于其他人，但遗憾的是我无法将图像正确地垂直居中。我希望有人能弄清楚需要什么。

这是顶部导航栏的右上角，我放置红色边框以便于查看。我希望右边的照片在容器盒内垂直居中，因为你可以通过照片下方的间隙看到它没有垂直居中。

请注意：我可以使用position：relative;底部：-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

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

或者，另一个解决方案：

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;
}

Answer 4

您可以在img中使用top属性

img {
   position: relative;
   top: 5%;
}