如何在Bootstrap中居中对齐内嵌图像？

Question

我在下面的代码的同一行中有一个下拉按钮和一个响应式图像。

<div class="container dropdown "> 
    <a class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> 
     <span class="icon-bars-button"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </span> 
    </a> 
    <ul class="dropdown-menu"> 
     <li><a href="#">Option1</a></li> 
     <li><a href="#">Option2</a></li> 
     <li><a href="#">Option3</a></li> 
    </ul> 
    <img class="img-responsive div-inline" src="res/test.png" alt="Logo"> 
</div> 

CSS：

.div-inline{ 
    display:inline-block; 
} 

图像获取显示旁边的下拉按钮。我希望它在行的中心。 附上图片，结果与图片顶部一样。我想要它在图像的下面部分。

Answer 1

您可以在另一个DIV一个DIV和img这样做将a tag并相应地确定网格类并将text-center类添加到img div。

另外，你可以为你做这个例子。

.div-inline { 
    display: inline-block; 
    text-align: center; 
    width: 95%; 
} 

Answer 2

自举3，你可以添加一个类.center块居中对齐

<div class="container dropdown "> 
<a class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> 
<span class="icon-bars-button"> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
</span> 
</a> 
<ul class="dropdown-menu" > 
<li ><a href="#">Option1</a></li> 
<li ><a href="#">Option2</a></li> 
<li ><a href="#">Option3</a></li> 
</ul> 
<img class="img-responsive div-inline center-block" src="res/test.png" alt="Logo"> 
</div>