CODEWITHSUNDEEP
htmlcss
Question Overflow
Question Overflow

Reputation: 11275

How to vertical align text within a list containing superscript?

I want to align text within a list of items containing superscript such that the main text are equally spaced vertically:

HTML:

<ul>
 <li>Shape: Rectangle</li>
 <li>Length: 5m</li>
 <li>Breadth: 3m</li>
 <li>Area: 15m<sup>2</sup></li>
 <li>Color: Blue</li>
</ul>

I have tried tinkering with the display, height, line-height and vertical-align properties in CSS. But none seems to work. Can anyone help me please? Thanks.

Upvotes: 0

Views: 1276

Answers (3)

Gregory Patton
Gregory Patton

Reputation: 1

Depending on format, you can try lowering the font size just before calling the <sup> tag:

...<br/> <li>Area: 15m<font

size=-1><sup>2</sup></font></li>

...<p/>

There is still a slight spacing gap, but it is not really noticeable.

Upvotes: -1

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201886

The cause of the problem is that superscripts tend to make line spacing uneven. Setting line-height to a sufficiently large value like 1.3 may help. But in general, it is best to avoid using the sup element and construct your own superscript element, using span and style that creates a superscript using relative positioning (which does not affect line spacing, unlike the vertical alignment caused by sup).

In this specific case, there is a much simpler and better approach: instead of <sup>2</sup>, use &sup2;, or enter directly the superscript two character “²” (on Windows, you can do that using Alt 0178). Being a normal character, it does not affect line spacing, and being designed by a typographer, it can be expected to look better than any superscript 2 created using HTML or CSS.

Upvotes: 4

Wex
Wex

Reputation: 15715

This might help you: http://jsfiddle.net/Wexcode/TgqQY/

HTML:

<ul>
    <li><span></span><span>Shape: Rectangle<span></li>
    <li><span></span><span>Length: 5m</span></li>
    <li><span></span><span>Breadth: 3m</span></li>
    <li><span></span><span>Area: 15m<sup>2</sup></span></li>
    <li><span></span><span>Color:</span> <span>Blue</span></li>
</ul>​

CSS:

ul { list-style: none; }
li { background: red; height: 50px; margin: 3px 0; padding: 5px 0; }
li span:first-child { height: 100%; }
li span { vertical-align: middle; display: inline-block; }

Upvotes: 0

Related Questions