Question

我正在尝试制作一个圆形的div，中间有一些文字。我可以在中间水平放置，很容易，但是我在垂直中心遇到了很多麻烦，我尝试过垂直对齐，填充，显示等，但它总是保持在顶部。

以下是令人讨厌的HTML：

<div class="widget">
    <p id='case'>{27 cases}</p>
</div>

这是该div的CSS：

.widget {
    background-color: #ff1122;
    color: yellow;
    width: 150px;
    height: 150px;
    border-radius: 100%;
    text-align: center;
    font-size: 24px;
    vertical-align: middle;
}

我正在尝试将文本精确地放在圆圈的中间。我怎么能这样做？

Answer 1

您需要添加line-height属性。使line-height等于圆的高度，在本例中为150px。

line-height:150px;

＆＃13;

.widget {
    background-color: #ff1122;
    color: yellow;
    width: 150px;
    height: 150px;
    border-radius: 100%;
    text-align: center;
    font-size: 24px;
    vertical-align: middle;
    line-height:150px;
}

＆＃13;

<div class="widget">
    <p id='case'>{27 cases}</p>
</div>

＆＃13;

如果你愿意使用flex-box，你也可以这样做。这适用于多行。

＆＃13;

.widget {
    background-color: #ff1122;
    color: yellow;
    width: 150px;
    height: 150px;
    border-radius: 100%;
    text-align: center;
    font-size: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

＆＃13;

<div class="widget">
  <p id='case'>This is multiple line text.</p>
</div>

＆＃13;

Answer 2

display: table-cell;
vertical-align: middle;

然后让你的圆圈显示：table;

.widget {
    background-color: #ff1122;
    color: yellow;
    width: 150px;
    height: 150px;
    border-radius: 100%;
    text-align: center;
    font-size: 24px;
    vertical-align: middle;
    display:table;
    line-height:150px;
}
p {
    display: table-cell;
    vertical-align: middle;
}

<div class="widget">
    <p id='case'>{27 cases}</p>
</div>

Answer 3

看看这个：

＆＃13;

.widget {
    background-color: #f12;
    color: yellow;
    width: 150px;
    height: 150px;
    border-radius: 100%;
    text-align: center;
    font-size: 24px;
}

.widget * {
  display:inline-block;
  vertical-align: middle;
}

.widget::before {
  content: "";
  display:inline-block;
  width: 0;
  height: 100%;
  vertical-align: middle;
}

＆＃13;

<div class="widget">
    <p id='case'>{27 cases}</p>
</div>

＆＃13;

Answer 4

制作圈display: table;而内圈p有display: table-cell;和vertical-align: middle;。

.widget {
    background-color: #ff1122;
    color: yellow;
    width: 150px;
    height: 150px;
    border-radius: 100%;
    text-align: center;
    font-size: 24px;
    display: table;
}

.widget p {
    display: table-cell;
    vertical-align: middle;
}

<div class="widget">
    <p id='case'>{27 cases}</p>
</div>

如何将一些文本垂直放置在圆形div的中心？

4 个答案: