SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast dziner's Avatar
    Join Date
    Jun 2004
    Location
    Harrisburg
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Vertical Align Suggestions?

    I need to create a layout for a page using inline CSS to try to match a design created by our ad agency. But I'm having a heck of a time trying to get the text to vertical align. I've done some googling for an answer to this but nothing I try seems to be working.

    First let me explain the layout. The page will consist of many "layers" which will have the product image to the left, and the name/description to the right. But they want the text to be aligned vertically in the middle of the product image.

    Here is the code I have so far. Can anyone recommend a way for me to vertical align the text?

    Code:
    <div style="padding: 0 0 0 60px;">
      <div style="float: left;"><img src="/images/easter1.png" alt="Product description" width="127" height="68" /></div>
      <div><p style="color: #9455c4; padding: 0; margin: 0; line-height: 1.3em;"><strong>Product title</strong>
      <br />Product description</p></div>
    </div>

  2. #2
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    You possibly don't have to even float the images, since they're inline. This would be the instance where I'd wrap the image with the <p> tag : )

    There is a vertical align, but it works with the baseline of the text. I think you'd set the text to vertical-align: middle which if I'm rememebering right, aligns the baseline of the text to the middle of the image... I think.

    Let's see, there's top, middle, bottom, sup and sub, baseline, and I think a few others. There's probably an online demo of this. This is not the deprecated valign. This is a current, valid css property.

    If the product descriptions are one-liners, it might be better semantically to make it a list. You could then have the <li>s be set to the height of the image, and the image set as a background. The li's text is padded left to get out of the way of the image, and then aligning... could be done either again trying vertical-align (I'm sorry my book I reference stuff is at work and I can't remember whether you set it on the text or what...) or if the sentences are really short and the images not really tall, the line-height of the text set to the image, which would center the text vertically (but this looks really bad when you have more than one line of text).

  3. #3
    SitePoint Enthusiast dziner's Avatar
    Join Date
    Jun 2004
    Location
    Harrisburg
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I can't set the product image as the background because I will need to use alt tags for accessibility reasons. Also, each image is a different height so I'll need something that can be easily adjusted (about 20 times).

    I was thinking of simply having the image in the same paragraph as the text title/description and apply a float: left to the image but this still does not solve the text vertical alignment.

  4. #4
    SitePoint Member siliconscript's Avatar
    Join Date
    Oct 2007
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    try style="vertical-align:middle" if this will solve your problem.
    Sandeep Sekhon, CTO
    tel: (559) 440-6422
    SiliconScript, Inc. - Providing Solutions

  5. #5
    SitePoint Enthusiast dziner's Avatar
    Join Date
    Jun 2004
    Location
    Harrisburg
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by siliconscript View Post
    try style="vertical-align:middle" if this will solve your problem.
    I've tried that. Doesn't work. I think because the div which contains the text is only as large as the text. So style="vertical-align: middle;" doesn't do anything.

  6. #6
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    vertical align only works with inline stuff so somecode thinks something is block.

    I can't set the product image as the background because I will need to use alt tags for accessibility reasons.
    It's the other way around-- if you have an image that's content, you need to tell everyone who doesn't get it that it's there and what it is. But if it's a photo of the product, isn't the name of the product right next to it?

    [alt="the inkjet 11000 printer with dual-boot and the kitchen sink"] Inkjet 11000 Printer, $cost, Comes with dual-boot and the kitchen sink! Buy now!

    But it depends on the situation. Is the image going to tell more than the text? Maybe then that info should also be in the product description.


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
  •