The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS help with aligning a title under an image

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #24239

    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


    Rob MacKay

    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


    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

    Soh Tanaka

    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:


    • 705


      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~


Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.