Geek Answers Handbook

Centering elements vertically inside the block

I am currently redesigning my site from a table in CSS. I am having problems with what seemed like a very simple task.

The site is simple. A box in the middle of the screen that contains several links.

The old site used <td valign="center"> to center all the links in the field. CSS doesn't seem to have an equivalent. I centered the elements using negative fields as follows:

 div { height: 200px; position: absolute; top: 50%; margin-top: -100px; }

This works great when you know exactly how big the element you are centering, but I need to be able to center the links without knowing how many vertical sizes the links occupy. I just want the alignment in the field to act as text-align: center . Only vertically.

Current site created using tables
Current CSS Version Progress

+8
css layout web
source share
2 answers

I was on your site and copied the html here.

You can do it:

 <style> #box{ display: table; } #box > div { display: table-cell; vertical-align: middle; } </style> <!-- Your html part --> <div id="box"> <div> <a href="#">Link A</a> <a href="#">Link B</a> <a href="#">Link C</a> <a href="#">Link D</a> </div> </div>

You must wrap the div element inside #box because the display: table-cell property will not work properly if you do not have a wrapper element set to display: table .

Your example here: jsfiddle

+4
source share

You have 4, maybe 5 solutions added to the bottom, as this is a combination of different css from your original and js to set the height:

  • Use a table cell and center it vertically
  • Use display: table-cell; vertical-align: middle; display: table-cell; vertical-align: middle; like css for your div
  • Updating the margin vertex with every change in div height using javascript
  • Use css3 flexbox (you need to use extensions for providers so that they do not work in some older browsers)

A simple example using the old flexbox version is chrome - add a wrapper div and give it a style:

 #wrapper { display: -webkit-box; -webkit-box-align: center; } #wrapper > div { margin: auto; }

fiddle for this http://jsfiddle.net/gK7YU/

The new flexbox style is also a chrome version, you will need to add prefixes from other suppliers, as well as a version without any prefixes in the final product.

 #wrapper { display: -webkit-flex; } #wrapper > div { margin: auto; }

fiddle for this: http://jsfiddle.net/LeHRD/

The scripts contain several more css properties so you can easily see what is happening.

Oh, sorry, you don’t need a div shell, you can just vertically concentrate any content using flexbox ... well, in any case, the solution I offer can be combined with display: table-cell; , so it works in older browsers as well.

You can also use absolute positioning with the specified height jsfiddle.net/N28AU/1

 #wrapper { possition:relative } #wrapper > div { position:absolute;top:0;right:0;bottom:0;left:0;margin: auto;}

you can calculate the height from the contained elements and update it via js if you want to avoid negative fields.

+6
source share

More articles:


All Articles