如何在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>