Question

您好，我试图将文字居中放在第一个圆圈div中。我认为它目前处于div的中心，但是当有超过一个字符如＆＃39; 200＆＃39;时，它看起来像下面那样时髦。我有红色圆圈背景，并试图使文本在中心，无论字符。提前谢谢你！

＆＃13;

.main {
  vertical-align: top;
  margin-top: 3px;
  margin-bottom: 5px;
  display: inline-block;}

.main .label {
  display: inline-block;}

.bg {
  background: red;
  padding: 10px;
  font-weight: bold;
  color: #fff;
  display: inline-block;
  border-radius: 60%;}

.bg .label {
  vertical-align: top;
  margin-top: 3px;
  margin-bottom: 5px;
  width: 10px;
  display: inline-block;
  margin: auto;}

＆＃13;

<div class="main">
  <div class="bg"><span class="label">200</span></div>
    <span class="label">This is the other text need to be</span>
  <div class="bg"><span class="label">0</span></div>
    <span class="label">This is the other text need to be</span>
</div>

＆＃13;

Answer 1

尝试在width:100%上设置.bg .label，如下所示：

.main {
  vertical-align: top;
  margin-top: 3px;
  margin-bottom: 5px;
  display: inline-block;}

.main .label {
  display: inline-block;}

.bg {
  background: red;
  padding: 10px;
  font-weight: bold;
  color: #fff;
  display: inline-block;
  border-radius: 60%;}

.bg .label {
  vertical-align: top;
  margin-top: 3px;
  margin-bottom: 5px;
  width: 100%;
  display: inline-block;
  margin: auto;}

<div class="main">
  <div class="bg"><span class="label">200</span></div>
  <div class="bg"><span class="label">0</span></div>
</div>

编辑：如果您希望为圆圈保持相同的宽度并仍然将文本居中，则可以使用以下内容替换width:10px;中的.bg：

.bg {
  /* ... */
  width: 35px;
  padding: 10px 0;
  text-align: center;
  /* ... */
}

所以完整的代码片段看起来像这样：

.main {
  vertical-align: top;
  margin-top: 3px;
  margin-bottom: 5px;
  display: inline-block;}

.main .label {
  display: inline-block;}

.bg {
  background: red;
  width: 35px;
  padding: 10px 0;
  text-align: center;
  font-weight: bold;
  color: #fff;
  display: inline-block;
  border-radius: 60%;}

.bg .label {
  vertical-align: top;
  margin-top: 3px;
  margin-bottom: 5px;
  width: 100%;
  display: inline-block;
  margin: auto;}

<div class="main">
  <div class="bg"><span class="label">200</span></div>
  <div class="bg"><span class="label">0</span></div>
</div>

Answer 2

尝试这样的事情。我猜你可以修复小圆圈的宽度和高度吗？如果是这样，此解决方案应该适合您。这里的好处是您的圆圈在视觉上保持一致，无论其中的值如何。

您可以根据自己的喜好调整圆的宽度/高度，无论您放置哪个值，都会保持居中。请注意，使用此解决方案，如果值超出其范围，您的圈子将不会缩放以匹配值的长度。不过，考虑到您的原始代码，我认为这是您正在寻找的行为。

另外，请注意，如果更改它们，您可能需要调整上边距以根据圆的高度定位值。希望这有帮助！

.bg {
  background: red;
  font-weight: bold;
  color: #fff;
  display: inline-block;
  border-radius: 60%;
  width: 38px;
  height: 38px;
}

.bg .label {
  display: inline-block;
  margin: 9px auto 0;
  text-align: center;
  width: 38px;
}

<div class="main">
  <div class="bg"><span class="label">200</span></div>
    <span class="label">This is the other text need to be</span>
  <div class="bg"><span class="label">0</span></div>
    <span class="label">This is the other text need to be</span>
</div>

将div中的文本居中不起作用

2 个答案: