[RESOLVED] using CSS to vertically center text in an A tag?

sneakyimp

I have a menu that I'm working on which uses <A> elements for the menu items. I've given these A elements height and width dimensions and background images which works pretty well -- except the text in these A elements is top-aligned. I've tried adding a vertical-align directive in my CSS but this doesn't seem to do anything at all.

I'd also like to add a bit of space around the text. Is this possible?

here's a bit of my CSS:

ul.menu li a {
  width: 295px;
  height: 59px;
  background: url(button_bg.jpg) no-repeat;
  display: block;
  padding: 0px;
  margin: 0px;
  border: none;
}

JPnyc

What you're looking for is called padding. That's the attribute to play with.

sneakyimp

Thanks for your response.

I found some help on another forum. I set the line-height to the same height as the A tag
(59px) and added some padding on the left. For any padding that I added, I had to decrease the height and/or width of the A tag because this increased the size of the A tag.

johanafm

Yes, the space occupied by an element is

margin-top
--- size of the actual element
top-border width
padding-top
height
padding-bottom
border-bottom
-- // size of the actual element
margin-bottom

And iirc margin can't always be determined just by looking at one single element, since it can be preceeded or followed by a negative margin.

But I believe you could also alter the encasing element

ul.menu li {
	vertical-align: center;
}

sneakyimp

Thanks for the clarification about the space occupied, Johana. That is useful.

For the vertical-align bit, I had tried that (and it's actually "middle" and not "center") but it didn't work. Setting the line-height to 59 px worked quite well and I added some padding for horizontal placement. It's working well enough now.

Thanks all!