如何在列表项中居中放置文本和子行？

Question

I had a list that was structured like this:

<ul>
  <li>
    <a href="#">Link</a>
  </li>
</ul>

I wanted each of my list items to have a height of 50px, so I set the line-height of <a> to 50px and it worked fine.

However, now I'm trying to add a sub-line to each <a> tag so that it looks like this:

<ul>
  <li>
    <a href="#">
      Link
      <span class="sub-line">Link Info</span>
    </a>
  </li>
</ul>

The sub-line would be a smaller font and would show up comfortably under the link text. I've been messing around with display and line-height and absolute positioning, but I've had no luck coming up with a clean solution. Help would be greatly appreciated!

Answer 1

You mean something like this?

a {
    position: relative;
}

a span {
    position: absolute;
    font-size: 0.5em;
    bottom: -1em;
    left: 0;
    width: 100%;
}

JSFiddle

Answer 2

This is what I understand from your question:

Fiddle

HTML:

<a href="#">
    Link
    <sub>Link Info</sub>
</a>

CSS:

a     { text-decoration: none; }
a sub { font-size: 8px; }
li    { text-align: center; }

Answer 3

You can just use display: block to put the sub line below the link text with a smaller font

.sub-line {
    display: block;
    font-size: 80%;
}

To reduce the distance

    line-height: 50%;

and to center both horizontally

li {
    text-align: center;
}

See JSFiddle

Answer 4

DEMO

Try this:

li {
  display: inline-block;
}
a {
  line-height: 50px;
  display: block;
}
span {
  display: block;
  line-height: 1px;
  font-size: 75%;
  //Here you can play with negative margin-top for better positioning 
}