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?span doesn't have a height because it is inline and only block elements have a height. Make it a div instead.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?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.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.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: <!-- m --><a class="postlink" href="http://www.jakpsatweb.cz/css/css-vertical-center-solution.html">http://www.jakpsatweb.cz/css/css-vertic ... ution.html</a><!-- m -->, but am starting to think that images may be the way to go.if it's a list of links i.e. a menu then you might want to use a list to format the code.
<!-- m --><a class="postlink" href="http://css.maxdesign.com.au/listamatic/Unfortunately">http://css.maxdesign.com.au/listamatic/Unfortunately</a><!-- m -->, 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.Set the <a> tag to be display: block. Then the link tag will act exactly like a DIV tag.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?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?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.
Can I use a vertical-align to center the text in the div's, or what?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.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.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: <!-- m --><a class="postlink" href="http://www.jakpsatweb.cz/css/css-vertical-center-solution.html">http://www.jakpsatweb.cz/css/css-vertic ... ution.html</a><!-- m -->, but am starting to think that images may be the way to go.if it's a list of links i.e. a menu then you might want to use a list to format the code.
<!-- m --><a class="postlink" href="http://css.maxdesign.com.au/listamatic/Unfortunately">http://css.maxdesign.com.au/listamatic/Unfortunately</a><!-- m -->, 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.Set the <a> tag to be display: block. Then the link tag will act exactly like a DIV tag.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?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?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.