ブートストラップでインラインイメージを中央に揃える方法は？

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

画像がボタンをドロップダウンするために、右横に表示されます。私はそれが列の中心にあることを望む。 画像が添付され、結果は画像の上に表示されます。私はそれをイメージの下の部分と同じようにしたい。あなたはあなたが別のdiv内の1つのdivの中a tagとimgを配置するこの操作を行うと、それに応じてグリッドのクラスを定義することができます

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

Answer 1

を中央揃えするには、クラス.centerブロックを追加することができ、ブートストラップ3と

Answer 2

img divにtext-centerクラスを追加します。

また、これを行うこともできます。

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