SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    my neverending Vertical Align text woes

    I can never seem to fully grasp this concept. What I'm trying to do is

    Code:
    <div>
           <img src="image.jpg" />
           <p>some text</p>
           <p>some text that may or may not be here</p>
    </div>
    I want the image to be on the left with the text on the right aligned vertically in the middle. If there's only one line, I want it to line up with the image. If there's two lines, I want it to continue to vertically align middle. I can align the text with margin/padding, but then it doesn't auto align when another <p> is added.

    any help is much appreciated!

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    Do something like this except you need to give the image "display:inline-block;vertical-align:middle;"
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for the reply...doesn't seem to work, though.

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    Really?
    Code:
    <!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>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    .outer {
    	position:relative;
    	display:table;
    	height: 250px;
    	width: 500px;
    	vertical-align: middle; 
    	text-align: center;
    	border: 1px solid #CCCCCC;
    	background:red;
    	float:left
    }
    .inner {
    	width:100&#37;;
    	display:table-cell;
    	vertical-align:middle;
    	position:relative;
    }
    img{display:inline-block;vertical-align:middle;}
    * html .inner {top:50%;left:0;}
    * html .inner p{top:-50%;	position:relative;}
    
    </style>
    </head>
    <body>
    <h1>Vertical align elements of different heights </h1>
    <div class="outer"> 
      <div class="inner">
        <p><img alt="" src="http://www.pmob.co.uk/temp/images/volcano-1.jpg"  height="150" />This is some random text : </p>
    
      </div>
    </div>
    </body>
    </html>
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    that's working with one line of text, but if i want a second line of text (with a break tag), it drops text below the image

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <!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>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    *{margin:0;padding:0;}
    .outer {
    	position:relative;
    	display:table;
    	height: 250px;
    	width: 500px;
    	vertical-align: middle; 
    	text-align: center;
    	border: 1px solid #CCCCCC;
    	background:red;
    	float:left
    }
    .inner {
    	width:100&#37;;
    	display:table-cell;
    	vertical-align:middle;
    	position:relative;
    }
    p{display:inline-block;}
    img{display:inline-block;vertical-align:middle;}
    * html .inner {top:50%;left:0;}
    * html .inner p{top:-50%;	position:relative;}
    
    </style>
    </head>
    <body>
    <h1>Vertical align elements of different heights </h1>
    <div class="outer"> 
      <div class="inner">
        <img alt="" src="http://www.pmob.co.uk/temp/images/volcano-1.jpg"  height="150" 
    
    /><p>This is some random text :<br>test </p>
      </div>
    </div>
    </body>
    </html>
    The very bottom most line will be aligned at the 50% vertical mark.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  7. #7
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for the replies, Ryan. That's pretty close, but not totally accurate in solving this problem. I've got to assume there's an accepted best method of doing this, I just can't find it in google.

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    As far as I know there isn't, but perhaps there is. I'll keep an eye on this thread.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  9. #9
    SitePoint Member
    Join Date
    Jul 2009
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Liberty79, I posted a Quick Reply a few hours ago but it seems to have gone astray so I'll try again.

    Seems you and I are in the same boat with that alignment problem. Been struggling with it for years. Finally, I've put what I know so far and what I am still trying to debug at xxxxxxxxxxxxx. Am hoping for replies from a couple of experts and if I learn more, I'll update that page.

    Oh, nuts; I am not allowed to include a URL in my post until I've posted 10x.

    Now, how do I show you what I have? A lot of HTML to post here.

    Good luck to both of us!

  10. #10
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DiamondWillow View Post
    Oh, nuts; I am not allowed to include a URL in my post until I've posted 10x.

    Now, how do I show you what I have? A lot of HTML to post here.

    Good luck to both of us!
    Please create your own thread, and to post a link leave off the http://www. parts of the URL so it looks like

    sitehere . com / page . php

    You don't need to post the HTML if we get the site link.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  11. #11
    SitePoint Member
    Join Date
    Jul 2009
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, Ryan, will start a new thread and do that. Thanks.

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    I have an old example here that may shed some light on it:

    http://www.pmob.co.uk/temp/image-overflow3.htm

    The best way is t use display table and display table cell but unfortunately IE6/7 don't understand it hence the hacks.

  13. #13
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I have an old example here that may shed some light on it
    I was looking through the OP's request last night. I suspected it was going to need some extra elements, two columns within a parent div. Paul your example is exactly as I envisioned what was needed to do this.

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    I do have another simpler demo here that does what was wanted.

    http://www.pmob.co.uk/temp/celltest2.htm
    http://www.pmob.co.uk/temp/vertical-align-again.htm


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
  •