Question

关于https://jsfiddle.net/postiffm/74cxr092/

> <div id="Tagline">
>     I'm in the center.
>     <div id="TaglineLeft"></div>
>     <div id="TaglineRight"><a href="tel:1-734-123-4567">I am a phone #</a></div> </div>

如何在TaglineRight中对齐文本，使其上方有一些空间，如中间部分的文字？我尝试了一些填充和边距，但似乎没有任何效果。

感谢。

Answer 1

添加行高：30px;到#TaglineRight a

Answer 2

#TaglineLeft, #TaglineRight {
 position: absolute;
 color: white;
 font-weight: normal;
 text-align: center;
 height: 100%;
 width: 30%;
 top: 0;
 border-radius: 7px;
 height: 20px;
 padding: 5px;
}

你可以将身高：20px; 和填充：5px; 添加到 #TaglineLeft，＃TaglineRight { class

Answer 3

旧方式是将子元素设置为表格数据，方法是将其设置为display: table-cell，vertical-align: middle;＆amp;将其父级设为display: table;。通过这种方式，您可以将父级的高度更改为任何/随时随地，并且子元素将始终保持垂直对齐。不像CSS3解决方案，它也可以在旧的浏览器中工作，当然也可以跨浏览器支持。 https://jsfiddle.net/ryf0w7rp/ - 尝试更改＆＃34; #Tagline＆＃34;元素的高度从20px到其他值并查看结果。

*如果您不希望主要包装元素使用display: table，那么您可以创建另一个级别的元素以使用display: table。

*对于示例我只针对＆＃34;＃TaglineRight＆＃34;具有内部<a>元素的元素。要使其他元素工作相同，添加相同的结构并将CSS设置为正确的元素。

CSS中的CSS垂直对齐文本

3 个答案: