CODEWITHSUNDEEP
htmlcss
julienln
julienln

Reputation: 712

Center multiple divs in another div?

I have four divs contained in another div, and I want the four inner divs to be centered.

I have used float: left on the four divs so that they are horizontally aligned.

CSS:

<style>
    .square  //inner divs
    {
        float: left;
        margin:1pt;
        width:72pt;
        height:72pt;
    }
    .container //outer divs
    {
        text-align:center;
        width:450pt;
        height: 80pt;
    }
</style>

and HTML:

<div class = "container">
    <div class = "square">...</div>
    <div class = "square">...</div>
    <div class = "square">...</div>
    <div class = "square">...</div>
</div>

How can I center the divs inside the container?

The number of inner divs can be variable.

Upvotes: 52

Views: 128883

Answers (8)

user17693898
user17693898

Reputation:

I think this might help:

<style>
.container {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-flow: wrap;
}
</style>

Upvotes: 1

Ashish Rajput
Ashish Rajput

Reputation: 1

enter link description here

All in one HTML element in auto center

This code apply all over HTML element in Center without any @mediaquery.

  • The HTML element auto center main css property display inline-block of the chide div and add css property text-align center of parent div 
.center {
            border: 1px groove;
            width: 97px;
            border-radius: 7px;
            padding: 10px;
            width: 122px;
            margin-left: 12px;
            margin-top: 13px;
            display: inline-block;
            text-decoration: none;

            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
            font-size: 1.2em;
            color: #000000;
            background: #dbdbdb;
        }

<div style="width: auto;text-align: center;">

            <div class="center">Div1</div>
            <div class="center">Div2</div>
            <div class="center">Div3</div>
            <div class="center">Div4</div>
            <div class="center">Div5</div>
            <div class="center">Div6</div>
            <div class="center">Div7</div>

    </div>

see this example click here

Upvotes: 0

Nestor
Nestor

Reputation: 1969

As #RwL say, using <span> works, here a sample code, tested on IE6/8, Chrome, Safari, Firefox:

CSS

<style type="text/css">
    /* borders and width are optional, just added to improve visualization */
    .parent
    {
        text-align:center;
        display: block;
        border: 1px solid red;
    }
    .child
    {
        display: inline-block;
        border: 1px solid black;
        width: 100px;
    }
</style>

HTML

<span class="parent">
    <span class="child">
        A
    </span>
    <span class="child">
        B
    </span>
</span>

Upvotes: 8

edi9999
edi9999

Reputation: 20574

Because you don't know the number of divs you have, you should use

text-align:center on the outer div

display:inline-block on then inner div

http://jsfiddle.net/edi9999/yv2WY/

HTML

<div class = "container">
    <div class = "square">John</div>
    <div class = "square">Mary</div>
    <div class = "square">Doe</div>
    <div class = "square">Jane</div>
</div>

CSS

.square
{
    margin:1px;
    width:20%;
    text-align:left;
    border: 1px solid gray;
    display:inline-block;    
}
.container
{
    text-align:center;
    width:100%;
    height: 80pt;
    border: 1px solid black;
}

Upvotes: 60

foch
foch

Reputation: 1059

Most elegant solution I could find when you have a dynamic number of div to center is to use text-align: center; on the parent div, and display: inline-block; on the children.

It's all explained in details here.

Upvotes: 5

teksatan
teksatan

Reputation: 21

Simply place margin:auto; for all subsequent divs inside your main wrapper that is text-align:center;. SHOULD allign all child divs to the center of the parent div i think?

Upvotes: 2

womp
womp

Reputation: 116987

Here's an alternate method if you can use an extra div:

<div class = "container">
  <div class="centerwrapper">
    <div class = "square">...</div>
    <div class = "square">...</div>
    <div class = "square">...</div>
    <div class = "square">...</div>
  </div>
</div>

<style>
    .square
    {
        float: left;
        margin:1pt;
        width:72pt;
        height:72pt;
    }
    .container
    {
        text-align:center;
        width:450pt;
        height: 80pt;
    }
    .centerwrapper
    {
       margin: auto;
       width: 302pt;
    }
</style>

Also, make sure you have a closing quote on your <div class = "container"> there. The code you pasted is missing one.

Upvotes: 26

RwwL
RwwL

Reputation: 3308

Instead of floating the .square divs, give them display: inline-block. This might be dodgy in Firefox 3.0.x but I believe inline-block is fully supported in 3.5.x.

Upvotes: 8

Related Questions