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

Question

I have a drop down button and a responsive image in the same line with the below 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;
}

The image gets displayed right next to drop down button. I want it to be in the center of the row. Attached an image, the result is as in top of the image. I want it as in the below portion of the image.

Answer 1

With bootstrap 3 you can add a class .center-block to center align

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

You can do this placing a tag in one div and img in another div and define grid classes accordingly and add text-center class to img div.

Alternatively, you can do this for you example.

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