CODEWITHSUNDEEP
htmlcssalignment
Sebin P Johnson
Sebin P Johnson

Reputation: 147

How to align a div which contains many divs to align in the center

I am trying to align all blocks of foo to the horizontal center of the webpage.

See my code below-

<div id="cert" style="display:block; align:center;">
  <div class="foo" style="background-color:violet;"></div>
  <div class="foo" style="background-color:indigo;"></div>
  <div class="foo" style="background-color:blue;"></div>
  <div class="foo" style="background-color:green;"></div>
  <div class="foo" style="background-color:yellow;"></div>
  <div class="foo" style="background-color:orange;"></div>
  <div class="foo" style="background-color:red;"></div>
  <div class="foo" style="background-color:silver;"></div>
</div>

class foo

.foo {
float: left;
width: 40px;
height: 40px;
margin: 5px;
border-width: 1px;
border-style: solid;
border-color: rgba(0,0,0,.2);
border-radius: 5px;
}

Upvotes: 2

Views: 720

Answers (4)

SED
SED

Reputation: 110

I am not sure if you mean something like this, here the foo elements are vertically center aligned, see codepen example

http://codepen.io/Edrees21/pen/bNObqm

<div id="cert">
  <div class="foo" style="background-color:violet;"></div>
  <div class="foo" style="background-color:indigo;"></div>
  <div class="foo" style="background-color:blue;"></div>
  <div class="foo" style="background-color:green;"></div>
  <div class="foo" style="background-color:yellow;"></div>
  <div class="foo" style="background-color:orange;"></div>
  <div class="foo" style="background-color:red;"></div>
  <div class="foo" style="background-color:silver;"></div>
</div>

CSS

html {
    height: 100%;
}

body {
    display: table;
    height: 100%;
}
#cert {
    height: 100%;
    display: table-cell;
    vertical-align: middle;
}
.foo {
    float: left;
    width: 40px;
    height: 40px;
    margin: 5px;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(0,0,0,.2);
    border-radius: 5px;
}

Upvotes: 0

manwill
manwill

Reputation: 457

remove float: left; from your css and add margin: 5px auto, and that should horizontally center your <div> elements. float: left will always push your content to the left.

Edit: You can also remove the style="..." block from your outer <div> as it doesn't really do anything. <div> elements display block by default, and align by itself isn't a valid css property (although text-align is).

Edit 2: If you want the outer <div> to be centered, but the inner <div> elements to show one after another, just set a width and margin on your outer <div>:

#cert {
    width: 500px; /* or whatever you want */
    margin: 0px auto;
}

If you want your inner <div> elements to be centered individually (instead of being left-aligned within a centered block), then you'll want to go with the other answers (i.e. set the outer <div> to text-align: center; and the inner <div> elements to display: inline-block;)

Good luck learning CSS. It's a fun world.

Upvotes: 1

Konrud
Konrud

Reputation: 1114

You can use this hack, if you don't mind to set your inner divs as inline-block you can Try this:

 #cert {
 width: 80%;
 margin: 1% auto;
 text-align: center;
 }

 #cert .foo {
  display: inline-block;
 }

Upvotes: 0

j08691
j08691

Reputation: 208002

If your goal is to have all your divs in one line horizontally, then use this:

.foo {
    width: 40px;
    height: 40px;
    margin: 5px;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(0, 0, 0, .2);
    border-radius: 5px;
    display:inline-block;
}
#cert {
    text-align:center;
}
<div id="cert" style="display:block; align:center;">
    <div class="foo" style="background-color:violet;"></div>
    <div class="foo" style="background-color:indigo;"></div>
    <div class="foo" style="background-color:blue;"></div>
    <div class="foo" style="background-color:green;"></div>
    <div class="foo" style="background-color:yellow;"></div>
    <div class="foo" style="background-color:orange;"></div>
    <div class="foo" style="background-color:red;"></div>
    <div class="foo" style="background-color:silver;"></div>
</div>

Use text-align:center on the parent div to center it's contents, then remove the float:left on the children and instead use display:inline-block.

Upvotes: 2

Related Questions