在圆形按钮中居中数字[关闭]答案

【问题标题】：centering numbers in round buttons [closed]在圆形按钮中居中数字[关闭]
【发布时间】：2015-10-22 21:04:17
【问题描述】：

我创建了一个圆形边框按钮，其中显示了一些数字。我试图将不同按钮中的数字居中，但 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>

【问题讨论】：

寻求代码帮助的问题必须在问题中包含足够的代码以重现问题。链接虽然有用，但如果链接失效，对未来的 SO 用户将毫无用处。

标签： html css twitter-bootstrap button

【解决方案1】：

原因是padding-right。您必须在 @media only screen and (max-width: 760px) {...} 中为您的 class: button.btn.btn-circle.btn-lg 删除 padding-right。

签出this。

您通过提供padding-right 来强制将内容留在内部

更新：

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

1)增加圆的尺寸（类：.button.btn.btn-circle.btn-lg）

或者

2) 减小.minus class/div 的字体大小。

我想没有其他选择更合适了。

【讨论】：