Question

我想在div内的多行显示文字。我希望这些线条是水平居中的，我可以在父text-align:center中使用div。问题是我希望这些文本行（包含在span中）具有较小的行间距离。所以，单<br>对我来说已经足够了。我尝试将margin和padding设置为<span>元素，但没有成功。如果我尝试定位它们absolute，则它不适用于父级中的水平alignment。那么，我怎样才能让它们水平居中并按像素控制空间的间隔？

Answer 1

默认情况下，跨度元素是内联的，这意味着边距和填充不适用。使用div代替或执行此操作，然后应用边距和/或填充。

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

行高也可以完成工作，但它不能提供尽可能多的控制，尤其是在各个span元素之间。

Answer 2

您可以尝试使用 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

CSS.Text以DIV为中心并控制垂直对齐

2 个答案: