Question

我想垂直居中这些线。我尝试了line-height方法，但线条不会在持有人.item上进行调整。

我有这个HTML：

<li><a href="#" class="item">
    <span>Line 1</span><br>
    <span>Line 2</span><br>
    <span>Line 3</span>
    </a>
</li>

和CSS：

.item {
    text-align: center;
    display: block;
    height: 125px;
    padding: 10px 0;
    border-radius: 2px;
    margin-bottom: 10px;
    color: #fff;
}

Answer 1

您可以在顶部使用与底部相同的填充，这样元素中的文本将是＆＃34;居中＆＃34;垂直。像这样：

.item {
    text-align: center;
    display: block;
    padding: 60px 0px;
    border-radius: 2px;
    margin-bottom: 10px;
    color: #fff;
}

另一种方法是使用line-height，但只有在有一行文本时才有效。

另外，请检查this。

如何垂直居中多线div？

1 个答案: