CODEWITHSUNDEEP
htmlcss
Joshua Frank
Joshua Frank

Reputation: 13848

How can I vertically align text within a span element, or make the span the same size as the text?

This seems like a pretty basic question, but I can't find the answer anywhere. In the image below, the word "Schedule" is in a span within a span. The blue box is not part of the CSS, it's the Firebug highlight rectangle showing the dimensions of the outer span.

enter image description here

Here's the HTML:

<span class="caption">
  <span class="green">Schedule</span>
</span>

I also made a jsFiddle illustrating the issue.

There is no padding or margin on either span, just some sizing and color information. The font size is 48px, but the span height is computed to be 65px, and the text is vertically centered in this span, causing the top of the text not to line up with the clock icon, which is in a separate HTML element.

The question is: why is the span taller than the text it contains, and how can I either (1) make them the same size, or (2) align the text at the top of the span. I want to emphasize that I am not setting the span height this way; Firefox is doing this, and there are no padding or margins involved.

Upvotes: 1

Views: 1002

Answers (3)

Math is Hard
Math is Hard

Reputation: 942

Make a div that is your container for the schedule word. 

.container
{
display: table;
height: 200px;
width: 100px;
}

.scheduleThingaMaJig
{
display: table-cell;
vertical-align:middle;
}

The schedule thing should be vertically centered and horizontal centering is just text-align: center on .container. You should use

instead of I think. Also if you are just aiming to align with the img, you can but a dimension on the img and force alignment that way, disregarding your extra top/bottom whitespace on schedule.

Upvotes: 0

Matt Whipple
Matt Whipple

Reputation: 7134

Controlling most of the dimensions for inline elements will have no effect and is generally not supported (it would be directly against the intent of being inline). You must modify the display to be either inline-block or block.

Upvotes: 1

JNDPNT
JNDPNT

Reputation: 7465

You'are looking for the line-height property. This determines the height of the text + bottom top. Also, please consider using the image as background-image like: url('<img_url>') no-repeat left center? This centers the image as well and you separate layout (as this image is pure for style)

So: the span needs a line-height of 48px to get the right height.

Upvotes: 0

Related Questions