CSS 生成的条带中的文本对齐问题

Posted 2023-03-05

【中文标题】CSS 生成的条带中的文本对齐问题

【英文标题】：Text alignment issues in CSS-generated strip

【发布时间】：2012-03-22 02:46:52

【问题描述】：

我创建了一个放置文本内容的简单条带，如下图所示。

同样的 CSS 是：

.strip 
    display: block;
    margin: auto;
    float: left;
    width: 6em;
    height: 2em;
    background: #090909;
    color: white;
    font-weight: bold;
    text-align: center;

现在，我要做的是让文本在条带的中间，水平和垂直，而text-align: center 帮助我实现文本的水平居中。我无法使文本垂直居中。请注意，我的标记是普通的<div class="strip">12345678</div>，我不愿意在div 中使用任何span。并希望保持标记尽可能干净。我怎样才能达到这种行为？

谢谢。

【参考方案1】：

添加等于 div 高度的 line-height。检查这个http://jsfiddle.net/VRBrr/2/

line-height:2em;

【讨论】：

很公平。我也在寻找这样的东西。谢谢

我使用了不同的line-height 值，但没有奏效。为什么行高与条带的高度相同？

因为它设置了内容行的高度，在内容上方和下方留下相等的间距，因此垂直对齐中间的文本。另请注意，此解决方案仅在您有单行内容时才有效。