Wie zentriert man ein Inline-Bild in Bootstrap?

Question

Ich habe eine Dropdown-Taste und ein reagierendes Bild in der gleichen Zeile mit dem untenstehenden Code.

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

Das Bild rechts neben Taste Dropdown angezeigt wird. Ich möchte, dass es in der Mitte der Reihe ist. Angehängt ein Bild, das Ergebnis ist wie im oberen Teil des Bildes. Ich möchte es wie im unteren Teil des Bildes.

Answer 1

Sie können diese Platzierung a tag in einem div und img in einem anderen div Zentrieren tun und Netzklassen entsprechend definieren und fügen Sie text-center Klasse zu img Div.

Alternativ können Sie dies für Sie Beispiel tun.

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

Answer 2

Mit 3 Bootstrap Sie eine Klasse .center-Block hinzufügen können, um

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