Menu
Following is the code I'm using in my html with twitter-bootstrap. I am trying to center align the output but the image is left-aligned no matter what I do.
<ul class="thumbnails">
<li class="span5">
<a href="#" class="thumbnail"><img src="img.jpg" /></a>
</li>
</ul>
Any simple solution?
795
Step 1: Wrap the image in a div element. Step 2: Set the display property to "flex," which tells the browser that the div is the parent container and the image is a flex item. Step 3: Set the justify-content property to "center." Step 4: Set the width of the image to a fixed length value.
Hover your mouse over View and uncheck Auto arrange icons. 3. Drag-and-drop the icons to line up horizontally.
Center Align Elements To horizontally center a block element (like <div>), use margin: auto; Setting the width of the element will prevent it from stretching out to the edges of its container.
Twitter bootstrap thumbnails are floated to the left by default, you have to overwrite that behavior on your own stylesheet in order to make them center align its container with the text-align:center and display:inline-block properties. Try this:
CSS
.thumbnails {
text-align:center;
}
.thumbnails > li {
display: inline-block;
*display:inline; /* ie7 fix */
float: none; /* this is the part that makes it work */
}
This way the thumbail images will center inside the .thumbnails container. Replace the .thumbnail class with the container you want to center your images in.
118
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
