css - CSS.Text 在 DIV 内居中并控制垂直对齐

Question

我想在div. 而且我希望线条水平居中，这是通过text-align:center在 parent 中使用的div。问题是我希望这些文本行（包含在 中span）具有较小的行间距离。所以，我一个人<br>就够了。我试图设置元素margin，但没有成功。如果我尝试定位它们，它不适用于父级中的水平。那么，我怎样才能让它们水平居中并通过像素控制间隔行？padding<span>absolutealignment

Answer 1

您可以尝试使用vertical-align属性，但要使用它，您需要将 display 属性设置为display:table-cell;

http://codepen.io/jonathan/pen/gntAq

<div>
    <span class="text">My Text To Align Vertically</span>
</div>

基本上你可以像这样使用 CSS 模仿表格行为

div {
    display: table;
    text-align: center;
    width: 300px;
    height: 150px;        
}

.text {
    display:table-cell;
    vertical-align:middle;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align

Answer 2

Span 元素默认是内联的，这意味着边距和填充不适用。要么使用 div 代替，要么这样做，然后应用边距和/或填充。

div.myParentDivClass span {display: inline-block;}

Line-height 也可以完成工作，但它不能提供太多控制，尤其是在单个跨度元素之间。