CODEWITHSUNDEEP
htmlcss
user3728587
user3728587

Reputation: 139

How to center div's that are inline-block'd

So I am trying to make it so that these 4 div's are side by side but centered using margin: auto;

Here is it WITHOUT inline-block;

JSFiddle

HTML:

    <section class="stats">
        <div class="box1">
            <h5>Online Users</h5>
        </div>
        <div class="box1">
            <h5>Online Users</h5>
        </div>
        <div class="box1">
            <h5>Online Users</h5>
        </div>
        <div class="box1">
            <h5>Online Users</h5>
        </div>
    </section>

CSS:

.stats {
    padding: 15px;
}

.box1 {
    margin: auto;
    width: 20%;
    background-color: #b0e0e6;
}

Here it is WITH inline-block; (for some reason not centering with margin)

JSFiddle

HTML:

    <section class="stats">
        <div class="box1">
            <h5>Online Users</h5>
        </div>
        <div class="box1">
            <h5>Online Users</h5>
        </div>
        <div class="box1">
            <h5>Online Users</h5>
        </div>
        <div class="box1">
            <h5>Online Users</h5>
        </div>
    </section>

CSS:

    .stats {
    padding: 15px;
}

.box1 {
    margin: auto;
    width: 10%;
    background-color: #b0e0e6;
    display: inline-block;
}

Thanks for the help!

Upvotes: 3

Views: 112

Answers (3)

Praveen
Praveen

Reputation: 243

Add text-align:center; to .box1

ie

.box1 {
margin: auto;
width: 20%;
background-color: #b0e0e6;
text-align:center;

}

Upvotes: 2

Ajesh VC
Ajesh VC

Reputation: 635

To center text, you just need to use style "text-align:center" for box1 class. see code below

.box1 {
    margin: auto;
    width: 20%;
    background-color: #b0e0e6;
    text-align:center;
}

Upvotes: 1

link
link

Reputation: 2510

You want to use text-align: center; so the modified css would look like this:

.stats {
    padding: 15px;
    text-align: center;
}

.box1 {
    margin: auto;
    width: 10%;
    background-color: #b0e0e6;
    display: inline-block;
    text-align: center;
}

See fiddle: http://jsfiddle.net/ug2YZ/3/

Hope this helps.

Upvotes: 4

Related Questions