Question

我创建了一个圆形边框按钮，其中显示了一些数字。我试图将数字集中在不同的按钮中，但是text-align和vertical-align无法帮助将数字置于每个维度（垂直和水平）的中心。

你能帮助我实现这个目标吗？

这是我的代码： http://jsbin.com/nefuhukuja/edit?html,css,output

谢谢

编辑：使用按钮

下面的文字我也遇到了问题

这是CSS

.minus
{
text-align:center;
}
.countdown-overlay .col-lg-2 p{
color: #cfd8dc;
font-size: 20px;
margin-top: 10px;
}
.btn span{
color: #cfd8dc;
font-size: 70px;
}

.btn-circle{
border: 7px solid #cfd8dc;
border-radius: 130px;
font-size: 12px;
height: 130px;
line-height: 1.428571429;
padding: 10px 0;
width: 130px;
text-align: middle;

}
.btn-circle.btn-lg{
border: 7px solid #cfd8dc;
border-radius: 130px;
display: inline-block;
font-size: 18px;
height: 130px;
line-height: 1.33;
padding: 10px 16px;
width: 130px;
vertical-align: center;
}
.btn-circle.btn-xl{
border: 7px solid #cfd8dc;
border-radius: 130px;
font-size: 24px;
height: 130px;
line-height: 1.33;
padding: 10px 16px;
width: 130px;
vertical-align: center;
}
button .minus{
text-align: center;
margin:auto;
vertical-align: center;

 }
.btn-circle span{
vertical-align: center;
margin: auto;
text-align: center;
}

.countdown-overlay{
margin: 20px auto 0 auto;
text-align: center;
 }
@media only screen and (max-width: 760px) {

button.btn.btn-circle.btn-lg
{
    height:70px;
    width:70px;
    border-radius:70px;
    border-width: 5px;
    padding-right:25px;
    margin-left:-10px;

}

button .minus
{
    text-align:center;
    vertical-align: center;
    font-size:30px;

}

}

这是HTML和脚本

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">      </script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="row countdown-overlay" style="z-index:2">
     <div class="col-xs-3 col-lg-2 col-lg-offset-2">
     <script src="js/countdown.js"></script>
        <button type="button" class="btn btn-default btn-circle btn-lg">    <span class="minus" id="day">-</span></button>
        <p>days</p>
     </div>
     <div class="col-xs-3 col-lg-2">
        <button type="button" class="btn btn-default btn-circle btn-lg">    <span class="minus" id="hour">-</span></button>
        <p>hours</p>
     </div>
     <div class="col-xs-3 col-lg-2">
        <button type="button" class="btn btn-default btn-circle btn-lg">    <span class="minus" id="minute">-</span></button>
        <p>minutes</p>
     </div>
     <div class="col-xs-3 col-lg-2 ">
        <button type="button" class="btn btn-default btn-circle btn-lg">   <span class="minus" id="second">-</span></button>
        <p>seconds</p>
     </div>
  </div>

</body>
</html>

Answer 1

原因是padding-right。您必须在padding-right内删除类： button.btn.btn-circle.btn-lg的{{1}}。

检查this。

您通过提供@media only screen and (max-width: 760px) {...}

强制将内容留在内部

<强>更新

只有圆形div中有两位数字时，上述解决方案才能解决您的问题。如果你想要更多的内容（如3位数：xxx）。您需要尝试以下方法：

1）增加圈子的尺寸（类：padding-right）

或者

2）减少.button.btn.btn-circle.btn-lg class / div的字体大小。

我认为没有其他选择更适合。

以圆形按钮为中心数字

1 个答案: