Velu Velu - 2 months ago 6
CSS Question

How to center align an inlined image in Bootstrap?

I am new to Bootstrap, hence seeking your help in resolving the below query.

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>


and the css is

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

Your help is appreciated,

Thanks.

Sample image

Answer

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