CODEWITHSUNDEEP
css
Mertafor
Mertafor

Reputation: 414

Horizontally and vertically center align DIV grid

I know this is a very old question and there are several approaches to this like using "flex" or fixed height etc.

But I found myself a new solution and need to understand if it's OK to use this way :

div.parent { 
display:table;
text-align:center;
}
div.child { 
display:inline-block;
vertical-align:middle;
width:33%;
}

This reason why I open this topic is to learn what are the drawbacks of using "display:table" for parent div. Because without it, multiple "child" divs collapsed due to unknown extra display:inline-block margin.

This method works like charm with pretty much all modern browsers yet I haven't come across before. So just need to make sure that it's alright to use.

Edit : I added width value to child

Demo : https://jsfiddle.net/tcd8jkeb/

Upvotes: 0

Views: 79

Answers (3)

SMS
SMS

Reputation: 84

Do u need like this   

 <style>
    div.parent
    { 
    display:table;
    text-align:center;
    }
    div.child 
    { 
    display:table-cell;
    vertical-align:center;
    }

    </style>
    <html>
    <head>
    <body>
    <div class="parent">
      <div class="child">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
      <div class="child">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and </div>
      <div class="child">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five </div>


    </body>

</head>

Upvotes: 0

Saika
Saika

Reputation: 396

div.parent { 
display:table;
text-align:center;
}
div.child { 
display:table-cell;
vertical-align:middle;
}
<div class="parent">
  <div class="child">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
  <div class="child">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and </div>
  <div class="child">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five </div>

  </div>

Upvotes: 0

Rob
Rob

Reputation: 15150

All display:table does is create a block level box "like a table". Without making the child elements display:table-cell or such, it doesn't do anything more than display:block does. Try it and see.

Upvotes: 2

Related Questions