参见英文答案 >
How to vertically center text with CSS?28
有人可以解释我如何在< a>元素 – 所以这两个文本是否出现在红色框的中间?
有人可以解释我如何在< a>元素 – 所以这两个文本是否出现在红色框的中间?
这是我的HTML:
- <ul>
- <li><a href="#">this is a link</a></li>
- <li><a href="#">this is an even longer link</a></li>
- </ul>
和我的CSS:
- li {list-style-type:none;margin:0;padding:0}
- li a {width:100px;float:left;background:red;margin-right:20px;height:40px}
非常感谢任何指针
解决方法
如果要将文本居中放置,请尝试:
- text-align: center;
如果您想要垂直居中的文本,请尝试:
- line-height: 40px; //Where 40px is the height of your parent element
请记住,当使用line-height时,它只能在一行文本上工作.如果你想做多行文本,那么恐怕你必须为文本指定一个高度,然后使用position:absolute;在文字上有位置:相对;在父元素上.
对于您的多行示例,我会尝试像the following jsFiddle:
- li {
- list-style-type:none;
- margin:0;
- padding:0;
- position: relative;
- height: 60px;
- width: 200px;
- display: block;
- background:red;
- }
- li a {
- width:100px;
- height:40px;
- position: absolute;
- top: 50%;
- margin-top: -20px;
- }