Cannot vertically center text and image relative to one another.

Discussion in 'CSS' started by Josh Inno, Mar 16, 2007.

  1. #1
    Hi there. I'm currently working on http://pioneergreensdentistry.com/ and am having a little bit of trouble getting the title text and title graphic to vertically center relative to one another. I've tried the vertical-align: middle; style on both the image and the text, and I've also tried the devalued align="middle" attribute on the graphic to the left. The style for this site is named style.css
     
    Josh Inno, Mar 16, 2007 IP
  2. math20

    math20 Peon

    Messages:
    1,562
    Likes Received:
    33
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I can't see what the problem is, show a graphic of what you are talking about.

    You might be able to solve this problem(if it exists) by altering the margin.

    #example{
    margin-top:20px;
    }
    Code (markup):
     
    math20, Mar 16, 2007 IP
  3. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #3
    Hi Josh,

    What you're trying to do is simple enough for modern browsers. But, you say, "IE isn't a modern browser". Yeah, that's the rub.

    Try going to my site[1] (sig line) and look at the vertical centering demos. One of them matches what you're trying to do. I don't have an example here, and I'm short on the time to code one.

    FWIW, I'm not sure you shouldn't top align the image and text. It would be more visually comfortable.

    cheers,

    gary

    [1] My host has been down and I guess the DNS system hasn't caught up with the new servers. Traffic has climbed from zero back to about 50% of usual. I'm one who can't access it; maybe you can.
     
    kk5st, Mar 16, 2007 IP
  4. Josh Inno

    Josh Inno Guest

    Messages:
    1,623
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #4
    It's for the title graphics, and my boss has requested that I center the titles, especially for those titles who's text is only on one line at the default size.

    Thanks for the tips guys, I'll see if I can get any of them to work.
     
    Josh Inno, Mar 19, 2007 IP
  5. Josh Inno

    Josh Inno Guest

    Messages:
    1,623
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Well, I'm back to the same problem.

    I have an image and a line of text on the same line. I want to center them relative to one another. This time it is on LIBA Beta. It is the "print application" link and pdf picture that I wish to vertically center relative to one another. I can do vertical-align: text-top; and vertical-align: text-bottom; but there doesn't seem to be a standard vertical-align: text-middle;.
     
    Josh Inno, Apr 2, 2007 IP
  6. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #6
    Wow! That's anal.

    You can try something like this:
    
    .info img {
      vertical-align: -.25em;
      }
    Code (markup):
    cheers,

    gary
     
    kk5st, Apr 2, 2007 IP
  7. Josh Inno

    Josh Inno Guest

    Messages:
    1,623
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #7
    It was a request specifically from my boss, so I'm looking for a way to do it. Thanks for the tip, I'll try it out.
     
    Josh Inno, Apr 3, 2007 IP
  8. Josh Inno

    Josh Inno Guest

    Messages:
    1,623
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Thanks Garry, that got it closer to being centered. I actually wound up using

    
    .info img
    {
    	vertical-align: middle;
    }
    
    Code (markup):
    Besides another bug in my code, my problem was I was trying to vertically align an h3 tag which had no relationship to the image it's self.

    I had such a migraine that day, I think I was allergic to something in a new soda I was trying.
     
    Josh Inno, Apr 3, 2007 IP
  9. petyard

    petyard Well-Known Member

    Messages:
    2,025
    Likes Received:
    39
    Best Answers:
    0
    Trophy Points:
    185
    #9
    use 2 divs
    use float:left for the image in first div
    and a line height equal with the image for the text in the second div
    it will work
     
    petyard, Apr 4, 2007 IP
    Josh Inno likes this.
  10. Josh Inno

    Josh Inno Guest

    Messages:
    1,623
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #10
    Petyard

    Well I already solved it, but thank you for the alernate solution. I have another page I may need to do this on, and if the solution I have now won't work, I'll try yours. Thank you.
     
    Josh Inno, Apr 4, 2007 IP