12

Center Align Several Children DIV

 2 years ago
source link: https://www.codesd.com/item/center-align-several-children-div.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Center Align Several Children DIV

advertisements

I am finding it bit confusing working around this problem.

I have parent DIV and 3/more Child DIV.

Parent DIV is center aligned and child DIV should be floating left but should be aligned center.

CSS contains,

.center {
   float:left;
   height:250px;
   width:15%;
   margin: 0 auto;
   border: 1px solid black;
}

I have a sample of the code link here...

If you want to horizontally align your elements centrally, then don't float them.

Change the way they are displayed to inline-block and align them in the center by changing the text-align style of their parent:

#parent {
    text-align:center;
    height:450px;
    width:75%;
    border:1px solid blue;
}
.center {
    display:inline-block;
    height:250px;
    width:15%;
    margin: 0 auto;
    border: 1px solid black;
}

<div id="parent">
    <div id="child1" class="center"></div><!--
 --><div id="child2" class="center"></div><!--
 --><div id="child3" class="center"></div>
</div>

Be sure to have no white-space or newlines between your children <div>s (in your HTML, that is) or comment it out. Now that these are inline elements, this white-space will be interpreted as a space.


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK