Question

我正在撕掉头发，试图将文本放在li容器中间。似乎从左到右居中。但从上到下不是。

我尝试向文本添加跨度，并通过边距和填充移动它。我根本无法移动文本。

我希望文本在蓝色框的中心水平和垂直居中。现在，文本从左到右居中，但从上到下居中。

<html>

<style>
.follow-button {
    height: 40px;
    width: 100px;
    background: #0081F2;
    border: #0081F2;
    color: #fff;
    font-weight: bold;
    text-align: center;
    margin: 0;
    padding: 0;
}

.follow-button:hover {
    cursor: pointer;
    bacgkround: #0059D0;
    border-color: #0059D0;
  }

#follow-button-nav {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}
</style>

<ul id="follow-button-nav">
    <li class="follow-button">Follow</li>
 </ul>

</html>```

Answer 1

您不能将文字的高度居中，

除外：

您对顶部和底部填充进行判断
将div置于td内，然后将vertical-align更改为middle

如果他们对这个问题有很多异议，则应搜索更多。是2019年

编辑：

我忘记了行高。虽然不建议这样做。您可以仅在按钮上添加行高css。

.follow-button {
    height: 40px;
    width: 100px;
    background: #0081F2;
    border: #0081F2;
    color: #fff;
    font-weight: bold;
    text-align: center;
    margin: 0;
    padding: 0;
    line-height:40px;
}

这是小提琴JSFiddle

Answer 2

基本上，您可以这样做：

.follow-button {
    width: 100px;
    background: #0081F2;
    border: #0081F2;
    color: #fff;
    font-weight: bold;
    text-align: center;
    line-height: 40px;
    margin: 0;
    padding: 0;
}

.follow-button:hover {
    cursor: pointer;
    background: #0059D0;
    border-color: #0059D0;
  }

#follow-button-nav {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}

<ul id="follow-button-nav">
    <li class="follow-button">Follow</li>
</ul>

我的文字不在li容器内居中

2 个答案: