Grow your CSS skills. Land your dream job.

help with aligning a title under an image

  • # February 27, 2009 at 7:34 am

    I am working on a site and I want to vertically align the furniture style number under the image. How can I do this using CSS. I’m sure it’s probably something simple I’m not thinking about.
    The address is http://ourhousedesigns.com/accent_chairs/index.html

    Chad

    Rob
    # February 27, 2009 at 8:46 am

    Hey Chad, welcome to the forums :)

    Well you havent actually contained it within anything, so its just floating outside of itself… Before you go any further I would stop you and tell you what you are doing there is probably going to cause you more problems. You are using in-line styling, this is not a good idea – try learning to link to an external style sheet and keep it away from your markup.

    Your idea is quite simple, there are a few ways, but here are some ideas.

    1) Use a table. Now normally I hate tables, but this is tablitured dater so I dont have a problem with it.

    2) use a wrapping div for the link/image pop the number in a span and position it after (therefore under) the link. you can then use text-align:center on the span.

    Im sure you might have a few questions after that, but really I would stop now and look at CSS a little more before you continue – it well really benifit you :D

    # February 27, 2009 at 9:26 am

    Rob,
    Thank you for your reply.
    The page is linked to an external style sheet.
    <link rel="stylesheet" type="text/css" href="../css/style.css" />

    I was thinking about using a table, but try to avoid them if at all possible. It just make the code look ugly.
    I will try option #2 first and then option #1.

    Thank you again for your reply. It is very much appreciated.

    Chad Ritchie

    # February 27, 2009 at 1:35 pm

    You can create this layout using an unordered list, with each list item floating left.

    To get your vertical alignment of the text, you can do something like:

    Code:
    HTML


    • 705

      CSS

      ul.prod_list li img {
      display: block;
      margin: 0 auto;
      }
      ul.prod_list li span {
      text-align: center;
      height: 30px;
      line-height: 30px;
      }

    I have not tested the code at all, but this would be my approach~

    -Soh
    http://www.SohTanaka.com

    # February 27, 2009 at 3:34 pm

    I would simply wrap it in a div:

    Code:

    Title of Image
    Code:
    .txtimage {
    text-align:center;
    }
Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".