4 Replies Latest reply on Feb 11, 2010 10:21 AM by Nancy OShea

    How do you position text in a div tag to be in the center vertically?

    HudsonSwimmer

      Can someone help?  I am struggling to convert from being dependent on tables to design sites to using all css and divs.  Anyway, in my practice file, i made a header that is styled to be 50 pixels tall.  The type in the header goes to the top.  I am used to having type default to to the left and positioned vertically in the center they way type "works" when placed in a <td>. What am I not "getting?" I would like to know that if I change the css for the header region from 50 to another value that the type will always be positioned where I want it. 

       

      thanks in advance for any suggestions.  Maybe the picture I've attached will better explain what I'm talking about. Oh, and I've also attached the html filehelp.jpg

        • 1. Re: How do you position text in a div tag to be in the center vertically?
          KevinSFreeman Level 1

          You just need to select the div, go to css, apply a rule if you haven't already, select a width for the div and set margin left to auto and margin right to auto. You can leave top and bottom empty. Good luck!

          • 2. Re: How do you position text in a div tag to be in the center vertically?
            janken71 Level 2

            You can add text-align:center to that containing div and it will center just the text.  You can also add padding-top, padding-bottom, etc. to the containing div to center it in the other direction (remember that padding increases the size of your div, so adjust your width and height to account for it).

             

            If you're looking to center a div, go with the margin method that Kevin posted before me.

            • 3. Re: How do you position text in a div tag to be in the center vertically?
              osgood_ Level 8

              HudsonSwimmer wrote:

               

              Can someone help?  I am struggling to convert from being dependent on tables to design sites to using all css and divs.  Anyway, in my practice file, i made a header that is styled to be 50 pixels tall.  The type in the header goes to the top.  I am used to having type default to to the left and positioned vertically in the center they way type "works" when placed in a <td>. What am I not "getting?" I would like to know that if I change the css for the header region from 50 to another value that the type will always be positioned where I want it. 

               

              thanks in advance for any suggestions.  Maybe the picture I've attached will better explain what I'm talking about. Oh, and I've also attached the html filehelp.jpg

               

              I'm afraid you'll have to starting looking at things differently. Css cannot yet vertically centre anything in a <div> container reliably.

               

              About as good as it gets is one line of text (see code below) using the line-height attribute AND you need to give the <div> a height too which is also likely to lead to other problems. So forget it. You can use padding and margin to push it into a 'visual position vertically centered' in your browser but there is no guarantee that others with different browser set ups will be seeing it the same.

               

              <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
              <html xmlns="http://www.w3.org/1999/xhtml">
              <head>
              <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
              <title>Untitled Document</title>
              <style type="text/css">
              #vertCentre {
              height: 300px;
              background-color:#FF0;
              line-height: 300px;
              text-align: center;
              }
              p {
              font-family: verdana, helvetica, arial, sans-serif;
              font-size: 12px;
              margin: 0;
              padding: 0;
              }
              </style>
              </head>

               

              <body>
              <div id="vertCentre"><p>This is some vertically centered text</p></div>
              </body>
              </html>

              • 4. Re: How do you position text in a div tag to be in the center vertically?
                Nancy OShea Adobe Community Professional & MVP

                There is no way to vertically center text in a division.  Use padding and/or margins in pixels or ems.

                 

                #div p {

                margin-top: 5em;

                padding: 10px;

                }

                 

                If your goal is to align items in column-1 with certain items in column-2, you'll need to use a table.  It's just not possible with CSS alone.

                 

                 

                 

                Nancy O.
                Alt-Web Design & Publishing
                Web | Graphics | Print | Media  Specialists
                www.alt-web.com/
                www.twitter.com/altweb
                www.alt-web.blogspot.com