tijs Posted January 31, 2015 Share Posted January 31, 2015 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 More sharing options...
Ingolme Posted January 31, 2015 Share Posted January 31, 2015 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;} 1 Link to comment Share on other sites More sharing options...
tijs Posted January 31, 2015 Author Share Posted January 31, 2015 (edited) 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 January 31, 2015 by tijs Link to comment Share on other sites More sharing options...
Ingolme Posted January 31, 2015 Share Posted January 31, 2015 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 More sharing options...
tijs Posted February 1, 2015 Author Share Posted February 1, 2015 Oh ok thanks man I got it! Link to comment Share on other sites More sharing options...
tijs Posted February 1, 2015 Author Share Posted February 1, 2015 In fact, what does the action text-align:middle; do so? Link to comment Share on other sites More sharing options...
amandakilimanjaro Posted February 1, 2015 Share Posted February 1, 2015 i think the best way to center a div in a div is using margin:auto; Link to comment Share on other sites More sharing options...
dsonesuk Posted February 1, 2015 Share Posted February 1, 2015 i think the best way to center a div in a div is using margin:auto;That only centre a div horizontally NOT! Vertically. Link to comment Share on other sites More sharing options...
tijs Posted February 1, 2015 Author Share Posted February 1, 2015 (edited) Can anyone explains me what is meant by this: 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 February 1, 2015 by tijs Link to comment Share on other sites More sharing options...
dsonesuk Posted February 1, 2015 Share Posted February 1, 2015 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 More sharing options...
tijs Posted February 1, 2015 Author Share Posted February 1, 2015 Ok I understand it, thanks for the explanation! Link to comment Share on other sites More sharing options...
tijs Posted February 1, 2015 Author Share Posted February 1, 2015 (edited) 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 February 1, 2015 by tijs Link to comment Share on other sites More sharing options...
dsonesuk Posted February 1, 2015 Share Posted February 1, 2015 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 1 Link to comment Share on other sites More sharing options...
tijs Posted February 2, 2015 Author Share Posted February 2, 2015 OK thanks it's clear :-) Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now