Jump to content

Vertical centering a div or <p>


tijs

Recommended Posts

Good evening everyone,

I was just looking for the best manner to center a div element in another div element both horizontal and vertical.

I found different styles to do this on the internet and I finnaly succeeded by doing this:

div.outer {display: table-cell;width: 500px;height: 500px;vertical-align: middle;text-align: center;}div.inner {display: inline-block;width: 200px;height: 200px;text-align: left;}
<div class="outer"><div class="inner">your content</div></div>

So I was wondering if this is the best manner and if setting the .outer class in a table-cell, has this other influences on the div element? Or is there a better way to do this?

 

Thanks guys!

 

Good evening

Link to comment
Share on other sites

table-cell will only work for Internet Explorer 8 and above. If you're OK with that then I think this shouldn't be a problem. I can't find it explicitly written anywhere at the moment, but I seem to remember that some browsers required the table-cell to be inside an element with display table-row which is inside another element with display table.

 

A working solution that doesn't require table-cell is this:

.outer {    width: 500px;    height: 500px;    line-height: 500px;    text-align: center;}.inner {    display: inline-block;    width: 200px;    height: 200px;    text-align: left;    vertical-align: middle;}
  • Like 1
Link to comment
Share on other sites

Many thanks for the answer! Creative solution with the line height :-)

It worked for me to center the .inner div into the .outer div but inside my inner div, I had some text which I put in my inner block but it displayed outside(under) the block..
Here is my full code:
<!doctype html><html lang="en"><head><meta charset="UTF-8" /><title> Canvas project</title> <style>.outer {width: 500px;       height: 500px;   line-height: 500px;   text-align: center;   background-color:red;} .inner {   display: inline-block;   width: 200px;   height: 200px;   text-align: left;   vertical-align: middle;   background-color:green;}  </style></head><body><div class="outer">  <div class="inner">    <p> Some text </p>  </div> <!--inner--></div> <!--outer--></body></html>

I hope you can help me.

Thanks,

Tijs

Edited by tijs
Link to comment
Share on other sites

I forgot to add line-height: normal to the .inner selector, which is meant to be part of this solution.

.inner {   line-height: normal;   display: inline-block;   width: 200px;   height: 200px;   text-align: left;   vertical-align: middle;   background-color:green;}
Link to comment
Share on other sites

Can anyone explains me what is meant by this:

lamp.jpg

Note: Setting the display property of an element only changes how the element is displayed, NOT what kind of element it is. So, an inline element with display:block is not allowed to have other block elements inside of it.

src:http://www.w3schools.com/css/css_display_visibility.asp

 

Why can't I put a block element inside a inline element?

Edited by tijs
Link to comment
Share on other sites

It is not strictly true with html5, but before you could not take a inline element such as anchor or span element which is inline, make it act like block element using display: block, and then insert div, p block elements inside this element which is STILL a inline element, as it would not validate to then defined rules. But with html5 you are now allowed to use an anchor this way, but as yet i personally have not done so.

Link to comment
Share on other sites

I've another question, It is from an exercise from w3schools.com.

Creating a horizontal menu

If I leave the float:left; element in both the ul and a, then the boxes also become smaller and don't take the width that we had set up.

Also , If I leave the float, the text comes against the 'horizontal menu' and if I put float again, then It don't..

Edited by tijs
Link to comment
Share on other sites

INLINE elements don't accept width or height, they stretch to content within them, with float the width/height can be applied. the UL height shrinks to anchor height before padding, because it is a block element by default it will stretch the width available to it, when float is removed, the anchor height appears the same because background-color stretches to include the padding

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...