homepage Welcome to WebmasterWorld Guest from 54.226.191.80
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Vertically center text in unordered list
matthewamzn




msg:3724490
 3:57 pm on Aug 16, 2008 (gmt 0)

I'm trying to vertically center text in an unordered list with an image on the right.

<ul class="search_results_rows_even">
<li class="search_year">Year</li>
<li class="search_make">Make</li>
<li class="search_model">Model</li>
<li class="search_price">$price</li>
<li class="search_thumbnail"><img src="url"></li>
</ul>

This is the CSS:

.search_results_rows_even li {
display:inline;
list-style:none;
vertical-align:middle;
height:34px;
background-color:#DDDDDD;
}
.search_year {
width:44px;
display:block;
float:left;
clear:left;
}
.search_make {
width:104px;
display:block;
float:left;
overflow:hidden;
}
.search_model {
width:318px;
display:block;
float:left;
overflow:hidden;
}
.search_price {
width:49px;
display:block;
float:left;
}
.search_thumbnail img {
border:1px;
width:45px;
display:block;
float:left;
}

 

csuguy




msg:3724498
 4:13 pm on Aug 16, 2008 (gmt 0)

Other than when using a table - vertical-align only lines things up according to the line-height. OR according to Image Height!

Here's a little technique I developed - adapted for your situation. Put an img tag in each li like so:


<ul class="search_results_rows_even">
<li class="search_year"><img class="valigner">Year</li>
<li class="search_make"><img class="valigner">Make</li>
<li class="search_model"><img class="valigner">Model</li>
<li class="search_price"><img class="valigner">$price</li>
<li class="search_thumbnail"><img src="url"></li>
</ul>

And in your CSS file put this:


.valigner
{
height:100%;
width: 0px;
vertical-align: middle;
visibility: hidden;
}

I tested that in both IE6 and FF2. It should work in all others as well - but test to make sure.

matthewamzn




msg:3724503
 4:20 pm on Aug 16, 2008 (gmt 0)

Thanks, works great!

csuguy




msg:3724506
 4:26 pm on Aug 16, 2008 (gmt 0)

No Problem :D

matthewamzn




msg:3728142
 4:40 pm on Aug 21, 2008 (gmt 0)

Do you have a technique for vertically centering the thumbnail?

<li class="search_thumbnail"><img src="url"></li>

csuguy




msg:3728860
 2:40 pm on Aug 22, 2008 (gmt 0)

The same technique works - just stick the <img class="valigner"> right before it within the li.

It will require some slight modification to your CSS though. First, add this:

.search_thumbnail
{
display:block;
float:left;
}

Then remove those two from attributes from the '.search_thumbnail img' css.

csuguy




msg:3728868
 2:43 pm on Aug 22, 2008 (gmt 0)

oh - and add '!important' to the valigner class for width and height like so:

.valigner
{
height:100% !important;
width: 0px !important;
vertical-align: middle;
visibility: hidden;
}

And make sure it comes after the css for the search_thumbnail. That should cause it to align the img nicely!
Ryan

matthewamzn




msg:3728953
 4:52 pm on Aug 22, 2008 (gmt 0)

I'm trying now to get this one row working. In Firefox it's all aligned to the top. In Safari and IE, the text is centered vertically.


<style>
/* Search Odd Rows */
.search_results_rows_odd li {
display:inline;
list-style:none;
vertical-align:middle;
height:50px;
background-color:#EEEEEE;
}
.search_year {
width:44px;
display:block;
float:left;
clear:left;
padding-left:5px;
}
.search_make {
width:104px;
display:block;
float:left;
overflow:hidden;
}
.search_model {
width:295px;
display:block;
float:left;
overflow:hidden;
}
.search_price {
width:49px;
display:block;
float:left;
}
.search_thumbnail {
width:53px;
display:block;
float:left;
}
.search_thumbnail img {
width:45px;
}
.valigner
{
height:100% !important;
width: 0px !important;
vertical-align: middle;
visibility: hidden;
}
</style>


<ul class="search_results_rows_odd">
<li class="search_year"><img class="valigner"><a href="">Year</a></li>
<li class="search_make"><img class="valigner"><a href="">Make</a></li>
<li class="search_model"><img class="valigner"><a href="">Model</a>
</li>
<li class="search_price"><img class="valigner"><a href="">Price</a></li>
<li class="search_thumbnail"><img class="valigner"><a href=""><img src="url"></a></li>
</ul>

csuguy




msg:3729347
 8:09 am on Aug 23, 2008 (gmt 0)

Change this:


.search_thumbnail img {
width:45px;
}

to this:


.search_thumbnail img {
width:45px;
vertical-align:middle;
}

That should do it :D
Ryan

matthewamzn




msg:3730670
 5:36 pm on Aug 25, 2008 (gmt 0)

Still can't get it to work. I ran a css validator and it says:
Unrecognized link element or xml-stylesheet PI.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
/* Search Odd Rows */
#search_results_rows_odd {
}
.search_results_rows_odd li {
display:inline;
list-style:none;
vertical-align:middle;
height:50px;
background-color:#EEEEEE;
}
.search_year {
width:44px;
display:block;
float:left;
clear:left;
padding-left:5px;
}
.search_make {
width:104px;
display:block;
float:left;
overflow:hidden;
}
.search_model {
width:295px;
display:block;
float:left;
overflow:hidden;
}
.search_price {
width:49px;
display:block;
float:left;
}
.search_thumbnail {
width:53px;
display:block;
float:left;
}
.search_thumbnail img {
width:45px;
vertical-align:middle;
}
.valigner
{
height:100% !important;
width: 0px !important;
vertical-align: middle;
visibility: hidden;
}
</style>

</head>

<body>

<ul class="search_results_rows_odd">
<li class="search_year"><img class="valigner"><a href="">Year</a></li>
<li class="search_make"><img class="valigner"><a href="">Make</a></li>
<li class="search_model"><img class="valigner"><a href="">Model</a>
</li>
<li class="search_price"><img class="valigner"><a href="">Price</a></li>
<li class="search_thumbnail"><img class="valigner"><a href=""><img src=""></a></li>
</ul>

</body>
</html>

csuguy




msg:3730731
 6:54 pm on Aug 25, 2008 (gmt 0)

The problem lies with the DocType - if you remove that it works. I don't usually use a doctype so I don't know how to solve that - it maybe good as another thread topic.

alt131




msg:3730962
 12:46 am on Aug 26, 2008 (gmt 0)

For the validating issues - stick with it, and don't be tempted to remove your doctype - that doesn't fix the problems - it just avoids identifying them.

I ran your posted code through the validator, and couldn't reproduce the style error. If validating online, a trick is select verbose output under advanced options for more information about error messages - some of them are very obscure/ambiguous at first.

For your xhtml:

1. Your style element needs at least a type.
From this: <style>
To this: <style type="text/css">

2. For xhtml all elements/tags must close.
From this: <img class="valigner">
To this: <img class="valigner"/>

Those two issues affected elements further down the page, so fixing them resolved everything (except for the src and alt for images, of course).

Also consider whether you need to use xhtml - especially as you are sending it text/html. See the HTML forum Library for a thread Why most of us should not use xhtml [webmasterworld.com]. If you decide to change the doctype to html, the thread FAQ: Choosing the best doctype for your site [webmasterworld.com] has ideas for choosing the right one.

Edit reason To clarify only considered the validation issue

csuguy




msg:3731207
 7:24 am on Aug 26, 2008 (gmt 0)


For the validating issues - stick with it, and don't be tempted to remove your doctype - that doesn't fix the problems - it just avoids identifying them.

Unless the problem is the doctype - as it was here (using the wrong one) ;)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved