Welcome to WebmasterWorld Guest from 54.221.49.52

Forum Moderators: not2easy

Message Too Old, No Replies

Vertically center text in unordered list

     

matthewamzn

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

10+ Year Member



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

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

5+ Year Member



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

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

10+ Year Member



Thanks, works great!

csuguy

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

5+ Year Member



No Problem :D

matthewamzn

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

10+ Year Member



Do you have a technique for vertically centering the thumbnail?

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

csuguy

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

5+ Year Member



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

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

5+ Year Member



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

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

10+ Year Member



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

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

5+ Year Member



Change this:


.search_thumbnail img {
width:45px;
}

to this:


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

That should do it :D
Ryan

matthewamzn

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

10+ Year Member



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

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

5+ Year Member



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

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

WebmasterWorld Senior Member 5+ Year Member



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

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

5+ Year Member




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) ;)

 

Featured Threads

Hot Threads This Week

Hot Threads This Month