Centering text in a span

[Girevik]

I have a series of bordered <span> elements that contain links. Some of the text wraps and some doesn't, and my user asked that all of the "boxes" be the same size. I accomplished this by using a "height", but now the text for the ones that don't wrap sits at the top of the box. I know the next thing he will ask for is to have the one line entries centered vertically in the box. How can I accomplish this?

[felgall]

span doesn't have a height because it is inline and only block elements have a height. Make it a div instead.

[Girevik]

I'll give that a shot, but giving it a "height: 40" did increase the height of the boxes using span.

Can I use a vertical-align to center the text in the div's, or what?

[ray326]

Can I use a vertical-align to center the text in the div's, or what?Try setting the line-height to match the height of the div.

[Kravvitz]

I'll give that a shot, but giving it a "height: 40" did increase the height of the boxes using span.
IE wrongly allows height to work in inline elements.

[Girevik]

Try setting the line-height to match the height of the div.

Line-hight works well for the entries that are just one line, but causes the ones that wrap to have extra space between the lines. I found this: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html, but am starting to think that images may be the way to go.

[DaveSW]

if it's a list of links i.e. a menu then you might want to use a list to format the code.
http://css.maxdesign.com.au/listamatic/

[Girevik]

Unfortunately, my client has requested a pretty specific layout that includes a border around the links and some way to visually show which link was selected (it's a navigator pane that stays visible when the links are selected). Thanks for the idea, though.

[toicontien]

Set the <a> tag to be display: block. Then the link tag will act exactly like a DIV tag.

[Girevik]

Set the <a> tag to be display: block. Then the link tag will act exactly like a DIV tag.

I guess I don't understand. Do I then put a height and a align-center attribute on the <a>, or how do I use that to do the vertical centering?

[Kravvitz]

Once you give <a>s display:block you can specify their widths and heights. To center the text horizontally, use text-align:center. To center one line of text vertically, use line-height.

Could you show us what you are trying to accomplish?

[Girevik]

I finally got it working by using the technique from that link I posted above. My problem was that some of the links in the div would fit on one line and others would wrap. When I used line-height to, then there was a gap between the two line.

Thanks everyone, for the input.