SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    Aug 2006
    Posts
    375
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with vertical-align

    Hope someone can help with this - I'm just trying to vertical-align some text in a <div> - its the top row in an inset box, where the text will either take up one line or two.

    I've tried vertical-align:middle;

    HTML Code:
    float: left;
    	position:absolute;
    	height:27px;
    	background-color:#F4F4F4;
    	color:#1655A5;
    	top:0px;
    	left:0px;
    	width:197px;
    	font-family:Arial, Helvetica, sans-serif;
    	font-size:12px;
    	font-weight:bold;
    	vertical-align:middle;
    	padding:5px 5px 5px 10px;
    With two lines of text it looks right:

    http://www.handprintwebdesign.co.uk/...overage102.htm

    But with one line, it sits too high:

    http://www.handprintwebdesign.co.uk/...overage101.htm

    And I tried making the line-height the same as the height:

    HTML Code:
    #title {
    	float: left;
    	position:absolute;
    	height:27px;
    	line-height:27px;
    	background-color:#F4F4F4;
    	color:#1655A5;
    	top:0px;
    	left:0px;
    	width:197px;
    	font-family:Arial, Helvetica, sans-serif;
    	font-size:12px;
    	font-weight:bold;
    	padding:5px 5px 5px 10px;
    }
    Which looks fine with one line:

    http://www.handprintwebdesign.co.uk/...overage201.htm

    But only displays one line, and anything else gets chopped off:

    http://www.handprintwebdesign.co.uk/...overage202.htm

    Is there any way of having one rule that will display the text centrally for either one line or two lines of text?

    Thanks.

  2. #2
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In all sites you provided if in #text you remove all line-height and add this :

    Css code
    Code:
    text-align:center;
    vertical-align:middle;
    it will align the text in center vertically and horizontally.

    By the way .. very nice app .. you made it ? Only javascript ?

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,283
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by liko View Post
    In all sites you provided if in #text you remove all line-height and add this :

    Css code
    Code:
    text-align:center;
    vertical-align:middle;
    it will align the text in center vertically and horizontally.
    That won't work I'm afraid as vertical-align (outside of table-cells) only applies to inline elements on the same line. It will not align two or more lines.

    For IE8+ you could add an inner span element and turn it into a table-cell element as follows.

    Code:
    #title {
    	position:absolute;
    	height:27px;
    	background-color:#F4F4F4;
    	color:#1655A5;
    	top:0px;
    	left:0px;
    	width:197px;
    	font-family:Arial, Helvetica, sans-serif;
    	font-size:12px;
    	font-weight:bold;
    	padding:5px 5px 5px 10px;
    	display:table;
    }
    #title span{
    	display:table-cell;
    	vertical-align:middle;
    }
    Code:
    <div id="title"><span>Operator name here </span></div>
    If you want IE7 and under support then it can be down with a different method using inline-block and another empty element.

  4. #4
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It seems i miss some details but wont text-align alone do the job ?

    @Paul Where can i find a good reference that explains in detail how display property works ( in combination to other properties as well) ?

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,283
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by liko View Post
    It seems i miss some details but wont text-align alone do the job ?
    It's a common mistake so don't worry

    If you had just one line of text and the text did not wrap then you could set the line-height to the same height as the div (27px in the example above) and that one line of text would automatically be centred. However it won't work for 2 lines of text because when the text wraps each line will be 27px apart.

    Vertical align only applies to inline elements on the same single line (unless they are table-cells or display:table-cell). It does not apply to two or more lines unless the lines are wrapped in an inline block and there is an other inline-block element on the same line that they can line up against (as shown clearly in Gary's article I linked to above).

    @Paul Where can i find a good reference that explains in detail how display property works ( in combination to other properties as well) ?
    The sitepoint reference (written by Tommy and me) gives you the solid details but is not a tutorial as such.

    The w3c visual formatting model is the ultimate resource but is hard to digest unless you are familiar with the terminology.


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
  •