vertical align prob

[cooldaddy]

Hi, I'm recoding my entire website to css so that there won't be tables in it anymore..
now i'm stuck with vertical aligning some images:

To see the problem/coding visit

http://www.msnemo.com/emocategories2.html

This is the original, so the endresult must be like this:

http://www.msnemo.com/emocategories.html

I haven't got a clue on how to vertical aling those images, they need to be within the 70 by 70 pixel box. Please note I still have to make a proper css file for the page, I'll make that as soon as the problem has been solved. thanks

[kaitco]

For your immediate issue, try using vertical-align: middle; on your images. It works like this (http://bonrouge.com/br.php?page=faq#valign).

You are unnecessarily nesting div tags. Why not use a list instead?

The CSS:
#icons {
font: normal normal xx-small Tahoma, sans-serif;
text-align: center;
margin: auto;
}

#icons ul {
padding: 0;
width: 170px;
list-style-type: none;
display: inline;
}

#icons li {
width: 45px;
float: left;
}




The HTML:
<div id="icons">
<ul>
<li><img src="http://www.msnemo.com/emoticons/adult/adult-00050.gif" width="42" height="42" alt="Emoticon" /> Adult</li>

<li><img src="http://www.msnemo.com/emoticons/animals/animals-00006.gif" width="42" height="42" alt="Emoticon" /> Animals</li>

<li><img src="http://www.msnemo.com/emoticons/celebration/celebration-00005.gif" width="42" height="42" alt="Emoticon" /> Celebration</li>

<li><img src="http://www.msnemo.com/emoticons/characters/characters-00002.gif" width="42" height="42" alt="Emoticon" /> Characters</li>
</ul>
</div>

Also, it does not make sense to build a page using only inline styles when you are just going to have to go back and create the stylesheet anyway. It would have been better to just assign ids or classes as you built the HTML and then make changes to the stylesheet as you build your site. As of right now, you would have to add the vertical-align to each div just to see how it works initially.

Hope this helps.

[cooldaddy]

Thanks for your code kaitco, looks nice.. though the vertical align problem still remains :o

For your immediate issue, try using vertical-align: middle; on your images. It works like this (http://bonrouge.com/br.php?page=faq#valign).

You are unnecessarily nesting div tags. Why not use a list instead?

The CSS:
#icons {
font: normal normal xx-small Tahoma, sans-serif;
text-align: center;
margin: auto;
}

#icons ul {
padding: 0;
width: 170px;
list-style-type: none;
display: inline;
}

#icons li {
width: 45px;
float: left;
}




The HTML:
<div id="icons">
<ul>
<li><img src="http://www.msnemo.com/emoticons/adult/adult-00050.gif" width="42" height="42" alt="Emoticon" /> Adult</li>

<li><img src="http://www.msnemo.com/emoticons/animals/animals-00006.gif" width="42" height="42" alt="Emoticon" /> Animals</li>

<li><img src="http://www.msnemo.com/emoticons/celebration/celebration-00005.gif" width="42" height="42" alt="Emoticon" /> Celebration</li>

<li><img src="http://www.msnemo.com/emoticons/characters/characters-00002.gif" width="42" height="42" alt="Emoticon" /> Characters</li>
</ul>
</div>

Also, it does not make sense to build a page using only inline styles when you are just going to have to go back and create the stylesheet anyway. It would have been better to just assign ids or classes as you built the HTML and then make changes to the stylesheet as you build your site. As of right now, you would have to add the vertical-align to each div just to see how it works initially.

Hope this helps.

[Arbitrator]

Example method of vertically centering a single line of content:

.iconbox {
width: 70px;
height: 70px;
line-height: 70px;
vertical-align: middle;
text-align: center;
}
.iconbox img {
display: inline; /* this is the default */
}

The behavior of vertical-align is different outside of table cells. It aligns inline (text-based) content relative to the line-height.