Question

＆＃13;

.circle{    
    width: 20px;
    height: 20px;
    border: 1px solid #2d2d2d;
    color: #2d2d2d;
    border-radius: 50%;
    cursor: pointer;
    display: inline-block;
    padding: 10px;
    margin: 0 3px;
    vertical-align: middle;}

.choice .circle{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
}

＆＃13;

<div class="choice">
<div class="circle" data-attr-val="2000" data-attr-price="59">2000</div>
<div class="circle" data-attr-val="20" data-attr-price="59">20</div>
</div>

＆＃13;

在示例中，您可以看到我的问题，4个或更多数字看起来很糟糕，1-3个数字看起来不错。

如何将4个或更多数字居中？

感谢您的帮助：）

Answer 1

看看这个

<强> HTML

<div class="choice">
<div class="circle" data-attr-val="2000" data-attr-price="59">2000</div>
<div class="circle" data-attr-val="20" data-attr-price="59">20</div>

<强> CSS

.circle {
    width:50px;
    height:50px;
    border:1px solid black;
    border-radius:250px;
    line-height:50px;
    text-align:center;
    display:inline-block;
}

Fiddle here

Answer 2

删除左右填充，并以相等的数量增加宽度 - 然后您可以通过text-align获得居中的四位数字。（但更多数字可能仍有问题。）

＆＃13;

.circle{    
    width: 40px;
    height: 20px;
    border: 1px solid #2d2d2d;
    color: #2d2d2d;
    border-radius: 50%;
    cursor: pointer;
    display: inline-block;
    padding: 10px 0;
    margin: 0 3px;
    vertical-align: middle;
    text-align:center;
}

.choice .circle{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
}

＆＃13;

<div class="choice">
<div class="circle" data-attr-val="2000" data-attr-price="59">2000</div>
<div class="circle" data-attr-val="20" data-attr-price="59">20</div>
</div>

＆＃13;

Answer 3

这是使用display: inline-table和伪元素的版本。

这些circle:before规则的属性会将数字保持在为圆圈设置的大小（尽管太小看起来很奇怪），即使有两行数字也是如此。

vertical-align: middle;
text-align: center;

我还使用css attr()来设置“data-attr-val”中的数字，而不是手动添加它们。

.circle {
    display: inline-table;
    width: 40px;
    height: 40px;
    border: 1px solid #2d2d2d;
    color: #2d2d2d;
    border-radius: 50%;
    cursor: pointer;
}
.circle:before {
    content: attr(data-attr-val);
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.circle.big {
    width: 80px;
    height: 80px;
}
.circle.big:before {
    content: attr(data-attr-val);
}

<div class="choice">
  <div class="circle" data-attr-val="2000" data-attr-price="59"></div>
  <div class="circle" data-attr-val="20" data-attr-price="59"></div>
</div>

<br />2 lines, still centered<br /><br />

<div class="circle big" data-attr-val="10000 20000" data-attr-price="59"></div>

数字以圆圈为中心

3 个答案: