treehouse : what would you like to learn today?
Web Design Web Development iOS Development

help with aligning a title under an image

  • 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
  • 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
  • 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
  • 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:


    HTML

    <ul class=\"prod_list\">
    <li>
    <img src=\"chair.jpg\" alt=\"\" />
    <span>705</span>
    </li>
    <ul>

    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
  • I would simply wrap it in a div:

    <div class=\"txtimage\">
    <img alt=\"\" src=\"images/yourimage.jpg\" /><br>
    Title of Image
    </div>


    .txtimage {
    text-align:center;
    }