SitePoint Sponsor |
|
User Tag List
Results 1 to 6 of 6
Thread: Aligning an Image within a List
-
Oct 31, 2007, 05:35 #1
- Join Date
- Jan 2007
- Posts
- 296
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Aligning an Image within a List
I am trying to get it so that my image in the following example appears in the middle of the list rather than at the top but am not sure how to do this.
CSS
Code:.ulhistory { list-style: none; margin: 0px 0px 30px 0px; padding: 0px; overflow: hidden; width: 450px; text-align: left; font: 12px "Arial", Helvetica, Sans-serif; line-height: 20px; } .ulhistory li.left { float: left; width: 250px; margin: 0px; padding: 0px; } .ulhistory li { float: left; width: 200px; margin: auto; padding: 0px; } img.history {margin: 0px; padding: 0px;}
HTML
Code:<ul class="ulhistory"> <li class="left"><span class="historydate">1898 - 1910</span><br /> Text will appear in here </li> <li><img class="history" src="images/history/history1.jpg" alt=" " /></li> </ul> <ul class="ulhistory"> <li class="left"><span class="historydate">1910 - 1930</span><br />Text will appear in here.</li> <li><img class="history" src="images/history/history2.jpg" alt=" " /></li> </ul>
Cheers for any help
-
Oct 31, 2007, 05:43 #2
- Join Date
- Nov 2004
- Location
- Ankh-Morpork
- Posts
- 12,158
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Not sure what you're asking, but to vertically centre the image within its list item, try
Code:img.history {vertical-align:middle; margin: 0px; padding: 0px}
Birnam wood is come to Dunsinane
-
Oct 31, 2007, 05:58 #3
- Join Date
- Jan 2007
- Posts
- 296
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
No that hasn't worked I had tries that as well.
What I am after is a list where on the left i have some text and on the right an image that goes with that text. The text on the left can be a few lines long or 5 lines long so I thought it would look better if the image was aligned in the middle of the list regardless of the text size. At the moment its aligned at the top
Hopefully this is a bit more clear.
-
Oct 31, 2007, 07:04 #4
- Join Date
- Nov 2004
- Location
- Ankh-Morpork
- Posts
- 12,158
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Wouldn't it then be far better to use one list item instead of two, and put the image as a background image to that list item?
As it is, you're using an entire list item for something purely presentational, which is semantically dubious.Birnam wood is come to Dunsinane
-
Oct 31, 2007, 10:35 #5
- Join Date
- Jan 2007
- Posts
- 296
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Sorry no thats not what i want.
I want it so that on the left side it describes a photo and then on the right side it shows the photo and the photo is exactly in the middle of the text regardless of how long the text is.
Aligning images in CSS seems to be a bit of a tricky subject in certain examples from my googleing
-
Oct 31, 2007, 15:54 #6
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
I want it so that on the left side it describes a photo and then on the right side it shows the photo and the photo is exactly in the middle of the text regardless of how long the text is.
Of course you will have to use some padding-right to create space for the image and I am also assuming that images are roughly the same width.
If the image is important content then it would be easier to align it to the top. The image could be in the same list item and just floated right.
There are ways to vertically align block level elements but they are more complicated than they need to be. You may be better of using a 2 cell table which will do the job quite easily.
Bookmarks