CODEWITHSUNDEEP
csshtml
Anthosiast
Anthosiast

Reputation: 556

After float images, need to be centered in div

I've tried many times and it couldn't work at all. I need the float images in the centered inside the div. So I don't need to do padding and margin. It will be automatically nice when I put another images.

HTML 

<div class="section-global">
    <p class="red"> HELLO </p>
    <p>
        <ul class="image-global">
            <li>
                <img src="assets/images/welcome.jpg" />
                <p> ABC </p>
            </li>
            <li>
                <img src="assets/images/welcome.jpg" />
                <p> ABC </p>
            </li>
            <li>
                <img src="assets/images/welcome.jpg" />
                <p> ABC </p>
            </li>
            <li>
                <img src="assets/images/welcome.jpg" />
                <p> ABC </p>
            </li>
        </ul>
    </p>
</div>

CSS

.section-global {
    margin:10px 0;
    border:1px solid #F63;
    overflow:hidden;
}

.section-global p {
    padding:10px;
}

.image-global {
    text-align:center;
}

.image-global li {
    float:left;
    display:inline-block;
}

.image-global img {
    width:125px;
    height:125px;
    margin:0 auto;
}

and here is JSFIDDLE. Any ideas?

Upvotes: 2

Views: 72

Answers (3)

AfromanJ
AfromanJ

Reputation: 3932

You should use only display: inline-block; and remove float: left; on your .image-global li class.

I have also added negative margin to close the gaps.

.image-global li {
    display: inline-block;
    margin-right: -4px;
}

Demo

Upvotes: 0

Siyah
Siyah

Reputation: 2897

You don't have to float the list items left if you have used display: inline-block and text-align: center.

If I am correct, this is what you want, right?

http://jsfiddle.net/d2rhR/2/

Just removed the float on 

.image-global li {

    display:inline-block;
}

Upvotes: 3

Albzi
Albzi

Reputation: 15609

Take away float:left; in .image-global li and it will be done.

So it will be this:

.image-global li {
    display:inline-block;
}

The display:inline-block; will still give the desired outcome and will also center like you want.

JSFiddle

Upvotes: 1

Related Questions