- This topic is empty.
-
AuthorPosts
-
February 27, 2009 at 7:34 am #24239chadritchieMember
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.htmlChad
February 27, 2009 at 8:46 am #54367Rob MacKayParticipantHey 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 #54369chadritchieMemberRob,
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 #54377Soh TanakaMemberYou 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~
-
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.