Forums

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
    Posts
  • #24239
    chadritchie
    Member

    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

    #54367
    Rob MacKay
    Participant

    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

    #54369
    chadritchie
    Member

    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

    #54377
    Soh Tanaka
    Member

    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

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