SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    453
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Vertically and horizontally center two lines of text

    I know vertical-align works great on one line of text, but I can't get this script to vertically (and horizontally) center two lines of text. What do I need to do change without changing the size of the div?

    Code:
    echo '<div style="float:left;width:171px;height:96px;text-align:center;display:table-cell;vertical-align:text-middle;background-color:yellow;">';
    echo '<h1 >1/35 Scale House</h1>';
    echo '</div>';

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,372
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You would need display:table-cell and vertical-align:middle but you can't float a table-cell. therefore you would be better turning the h1 into a table-cell instead and do this.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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>
    .vert {float:left;}
    .vert h1 {
    	margin:0;
    	display:table-cell;
    	vertical-align:middle;
    	width:171px;
      height:96px;
    	text-align:center;
    	background-color:yellow;
    }
    </style>
    </head>
    <body>
    <div class="vert">
    	<h1>1/35 Scale House</h1>
    </div>
    </body>
    </html>

  3. #3
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    453
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul O'B. Apparently the property order makes a difference. How did you know to introduce the properties in that order?

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,372
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by nichemtktg View Post
    Thanks Paul O'B. Apparently the property order makes a difference. How did you know to introduce the properties in that order?
    By making the h1 a table-cell the browser constructs an anonymous display:table element around it which leaves you free to float the parent div. You can't float table-cells so the only way to do it was from the inside out.

  5. #5
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    453
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    didn't know that. Thanks again Paul O'B.

    Niche


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •