html – 使用CSS垂直对齐元素中的文本

前端之家收集整理的这篇文章主要介绍了html – 使用CSS垂直对齐元素中的文本前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
参见英文答案 > How to vertically center text with CSS?28
有人可以解释我如何在< a>元素 – 所以这两个文本是否出现在红色框的中间?

http://jsfiddle.net/WeKtX/

这是我的HTML:

  1. <ul>
  2. <li><a href="#">this is a link</a></li>
  3. <li><a href="#">this is an even longer link</a></li>
  4. </ul>

和我的CSS:

  1. li {list-style-type:none;margin:0;padding:0}
  2. li a {width:100px;float:left;background:red;margin-right:20px;height:40px}

非常感谢任何指针

解决方法

如果要将文本居中放置,请尝试:
  1. text-align: center;

如果您想要垂直居中的文本,请尝试:

  1. line-height: 40px; //Where 40px is the height of your parent element

请记住,当使用line-height时,它只能在一行文本上工作.如果你想做多行文本,那么恐怕你必须为文本指定一个高度,然后使用position:absolute;在文字上有位置:相对;在父元素上.

对于您的多行示例,我会尝试像the following jsFiddle

  1. li {
  2. list-style-type:none;
  3. margin:0;
  4. padding:0;
  5. position: relative;
  6. height: 60px;
  7. width: 200px;
  8. display: block;
  9. background:red;
  10. }
  11.  
  12. li a {
  13. width:100px;
  14. height:40px;
  15. position: absolute;
  16. top: 50%;
  17. margin-top: -20px;
  18. }

猜你在找的HTML相关文章