Center an image in div

Question

I have some images:

<div class="builder-item-content row">
    <div class="twelve columns b0">
    <ul class="upcoming-events">
    <li>
        <a href="http://www.padi.com/scuba/" target="_blank">
            <img src="assets/images/padi_logo.png" alt="" style="text-align:center">
        </a>
    </li>
    <li>
        <a href="http://www.sssnetwork.com/" target="_blank">
            <img src="assets/images/sss_logo.png" alt="">
        </a>
    </li>
    <li>
        <a href="http://www.scubapro.com/" target="_blank">
            <img src="assets/images/scubapro02.png" alt="">
        </a>
    </li>
    </ul>
</div>

I want to center them inside the container. How I can do this?

Possible duplicate http://stackoverflow.com/questions/7055393/center-image-using-text-align-center , read the answer — reuelab, Apr 16 '14 at 03:56

score 2 · Answer 1 · answered Apr 16 '14 at 02:07

Without really testing this I think after class you have

<ul class="upcoming-events" style="Width:800px; Margin:0 auto;">

This should work with the div as well. Width can be whatever you would want it to be... I just put 800px. The important part is margin:0 auto;

score 0 · Answer 2 · answered Apr 16 '14 at 01:58

0

div.builder-item-content.row {
    text-align: center;
}

Since images are inline-level, they can be centered with text-align (even tho they aren't text).

answered Apr 16 '14 at 01:58

bjb568

11,089
11
50
71

Center an image in div

2 Answers2