March 29, 200917 yr All, This is my first post - ever. I'm a beginner. My question is fairly simple ... I'm trying to align the text that is the the blue element (div 3) so that its centered both horizontally and vertically. I accomplish the horizontally by using, text-align: center - - but how do I center it vertically?? Much appreciated! John HTML CODE: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <Title>Color Blocks</title> <link rel="stylesheet" type="text/css" href="colors_rel.css" /> </head> <body> <div class="one">One</div> <div class="two">Two</div> <div class="three">Three</div> <div class="four">Four</div> </body> ------------------------------ CSS CODE: div { position: relative; width: 250px; height: 100px; border; 10px single black; color: black; } div.one { background-color: greenyellow; padding-left: 180px; padding-right: 80px; padding-top: 80px; } div.two { background-color: green; } div.three { position: absolute; background-color: blue; right: 1200px; top: 120px; z-index: 4; border-style: solid; border-width: thick; text-align: center; } div.four { background-color: yellow; text-align: right; }
March 29, 200917 yr Centring vertically is a little more tricky. There's two effective methods that i know of. One best for block elements, and another i've only ever used for inline elements. (actually there's a third method i know too, but it doesn't work for opera, so i won't share it, and i'd never recommend it). One is to apply a padding-top of 50% then adding a negative margin equal to half the elements height So for example .three{height:200px padding-top:50%; margin-100px } The other method is setting the line height equal to the elements height, however i've only used this for inline elements, so i wouldn't know how it reacts with block level elements. .three{height:200px; line-height:200px } Might be a better way though, and it's not very good if you don't have a definate height for the element.
Create an account or sign in to comment