Jump to content

Vertically aligning text?

Nohana

By Nohana
in CSS

Recommended Posts

Nohana Newbie

Nohana

Posted
Posted

Hello,I'm coding an application which requires a body of text inside a <div> tag to be centered both horizontally and vertically. "text-align" beats the first problem, but "vertical-align" doesn't seem to work on texts... I don't want to rely onstuff like "bottom: 32px" and so on since I don't know the user's font size. If the font size is much larger than my own, the text wouldn't appear where I intend. So how can I perfectly align a body of text within a <div> tag vertically? I'm looking for something equivalent to "text-align: center". Thanks,

Link to comment
Share on other sites
Mistabeo Newbie

Mistabeo

Posted
Posted

What is the CSS for your container div? Is there something else going into the div? I feel as though affecting the vertical padding within the div should work, or creating a div to encapsulate the one with the text. I'd have to know more about your div's design to offer a solution though. Perhaps you can solve using ems instead of pxs.-Don

Link to comment
Share on other sites
Nohana Newbie

Nohana

Posted
  • Author
Posted

I figured I should've included some more detail. My container div must have position:absolute and some size (x,y). Other than that I can't think of any other relevant information.I've tried before to place the text inside another <div> and then try manipulating this <div> inside my main <div> instead of the text itself, but this proved somewhat complicated I failed to get result I intended.

Link to comment
Share on other sites
Nohana Newbie

Nohana

Posted
  • Author
Posted

Now this is a problem, the width/height of <div> are dependent on my text body. I'm looking for an independence case, where I can set any size I want to the <div> and don't have to worry about the size of the text inside the <div>.You can think of the <div> as small notes of fixed size (say, 200px, 200px). Sometimes I'll write a lot in them, sometimes I'll just write one word. My font-size can also vary from one note to another while my <div> (the note) remains the same size as always. In whichever case, my text will always be centerly aligned within the note. Also if possible, I'd like to reserve the right to leave the text "class"less, that it is, my text is just a normal text, without any fancy CSS attributes. I'm actually surprised there's no actual simple way of achieving this. Since there's a handy "text-align: center" attribute, I'd expect for something like "vertical-align: middle" would work on texts.(Note: small update)I've just realized I can get exactly what I want by putting my text inside a table instead of <div>:

<table border="1" width="100" height="100"><tr><td><center>HELLO<br />WORLD!</center></td></tr></table>

However, my question stands, is there no way to get this using only a <div> and CSS? :)

Link to comment
Share on other sites
rzea Member

rzea

Posted
Posted

Not sure if I understood correctly, but maybe something like this? :)HTML:

<div id="centered-div">  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>  <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>

CSS:

#centered-div { width:20%; margin:10% auto 0; background:#ccc; padding:10px;}

Link to comment
Share on other sites
Mistabeo Newbie

Mistabeo

Posted
Posted

Hiya, I found what you were looking for on another site.Thanks goes to Gary Turner from http://gtwebdev.com/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  <html xml:lang="en"       xmlns="http://www.w3.org/1999/xhtml"       lang="en"> <head>   <meta http-equiv="content-type" content="text/html; charset=utf-8" />    <title>v+h centering</title> <style type="text/css"> /*<![CDATA[*/  html, body {     margin: 0;     padding: 0;     height: 100%;     }  #container {     border: 1px solid black; /*for clarity*/     display: table;     height: 50%;     width: 90%;     margin: 25px auto;     padding: 5px; /*for clarity*/     }  #content {     border: 1px solid black; /*for clarity*/     display: table-cell;     vertical-align: middle;     position: relative;     width: 100%; /*IE needs hasLayout*/     }  #inner {     border: 1px solid black; /*for clarity*/     width: 50%;     margin: 0 auto;	text-align: center;     }  /* \*/ * html #content {     top: 50%;     left: 0;     }  * html #content #inner {     position: relative;     top: -50%;     } /* */  /*]]>*/ </style> </head>  <body>   <div id="container">     <div id="content">       <div id="inner">         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras malesuada.              Donec sed elit. Mauris quis eros eget velit posuere semper. Nam lobortis.               Integer at justo at quam vestibulum aliquet. Maecenas.</p>       </div><!-- end inner -->     </div><!-- end content" -->   </div> </body> </html>

So I feel the solution here comes from #content { display: table cell }. As you noticed, using a centered table solves your problem; but it uses the tables we're all supposed to hate. Almost hilariously, the css method involves making a div act like a the tables we hate...ironic at the very least. Anyway, affecting the width and the height of the #container style will allow you to create the exactly dimensioned post-it's that you desire for your site. -DonEDIT: had to fix lorem ipsum text because it was breaking the forum formatting due to length

Link to comment
Share on other sites
Synook w3schools Guru

Synook

Posted
Posted
Almost hilariously, the css method involves making a div act like a the tables we hate...ironic at the very least.
Not true - the reason tables should not be used for layout is semantics. The table construct should be used only for tabular data, because that is what they are meant for, like only using header tags for headers, or only wearing socks on your feet. Styling is a completely different matter, as that controls appearance, but doesn't affect the underlying meaning of the code, as it is still a semantically-neutral division tag. If we couldn't see the CSS, it wouldn't make a difference. Id est, if you saw a really nice design on a sock, there is no reason (besides copyright...) you couldn't reproduce that style on a beanie to wear on your head - but you wouldn't put the sock over your hair :).
Link to comment
Share on other sites
  • 3 weeks later...

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...