Question

所以我有一个圆圈，其中有一个根据用户数据而变化的数字。你怎么能这样做，所以数字始终居中，无论它是多少？

＆＃13;

.Box {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background-color: #9ba2a8;
  text-align: center;
  display: inline-block;
  margin-left: 5px;
  position: relative;
  cursor: pointer;
  bottom: 15px;
  margin-top: 40px;
  margin-left: 40px
}

.TLP-blueBg {
  background-color: #2b88c7;
  transition: background-color 0.35s ease;
}

.Text {
  vertical-align: middle;
  display: inline-block;
  margin-top: 4px;
  position: absolute;
  left: 50%;
  margin-left: -2.15px;
  font: 200 1.25em/1.3em 'Open Sans';
  color: white;
}

.task {
  width: 100%;
  height: 55px;
  cursor: pointer;
  background-color: white;
  border-top: solid #eaeaea 1px;
  border-bottom: solid #eaeaea 1px;
}

＆＃13;

<div class="Box">
  <p class="Text">1</p>
</div>

＆＃13;

Answer 1

您可以使用变换，如下所示：

<强> CSS

* * * * * php /path-to-your-project/artisan schedule:run >> /dev/null 2>&1

<强> DEMO HERE

Answer 2

你可以摆脱位置属性以及其他不必要的css规则。试试这段代码。

.Text {
  display: inline-block;
  font: 200 1.25em/1.3em 'Open Sans';
  color: white;
  line-height: 35px;
  text-align: center;
  margin: 0;
}

Answer 3

从position: absolute课程中删除.Text。由于它，它内部的文本没有正确对齐 - 根据你想要的。

以下是工作示例：https://jsfiddle.net/qb9mxkhy/33/

当.Text

中有3位数时，检查这是否正常

Answer 4

将您的.Text CSS更改为：

.Text{
    vertical-align: middle;
    display: block;
    margin-top: 4px;
    font: 200 1.25em/1.3em 'Open Sans';
    color: white;
    text-align: center;
    width: 100%;
}

Answer 5

＆＃13;

.Box {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background-color: #9ba2a8;
  text-align: center;
  display: inline-block;
  margin-left: 5px;
  position: relative;
  cursor: pointer;
  bottom: 15px;
  margin-top: 40px;
  margin-left: 40px
}

.Text {
  vertical-align: middle;
  display: inline-block;
  margin-top: 4px;
  left: 50%;
  font: 200 1.25em/1.3em 'Open Sans';
  color: white;
}

.task {
  width: 100%;
  height: 55px;
  cursor: pointer;
  background-color: white;
  border-top: solid #eaeaea 1px;
  border-bottom: solid #eaeaea 1px;
}

＆＃13;

<div class="Box">
  <p class="Text">4</p>
</div>

＆＃13;

删除位置：绝对;和margin-left：-2.15px;来自.text class。

Answer 6

课堂上的文字：

.Text {
     text-align: center;/*add this line*/
     vertical-align: middle;
     display: inline-block;
     margin-top: 4px;
     /*remove*/
     /*this*/position: absolute;
     /*this*/left: 50%;
     /*and this*/margin-left: -2.15px;
     font: 200 1.25em/1.3em 'Open Sans';
     color: white;
 }

Answer 7

我建议您 Flexbox ：

＆＃13;

.Box {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background-color: #9ba2a8;
  margin-left: 5px;
  position: relative;
  cursor: pointer;
  bottom: 15px;
  margin-top: 40px;
  margin-left: 40px;
  
  display: flex; /* displays flex-items (children) inline */
  justify-content: center; /* centers them horizontally */
  align-items: center; /* and vertically */
}

.Text {
  font: 200 1.25em/1.3em 'Open Sans';
  color: white;
}

＆＃13;

<div class="Box">
  <p class="Text">1</p>
</div>

<div class="Box">
  <p class="Text">99</p>
</div>

<div class="Box">
  <p class="Text">404</p>
</div>

＆＃13;

如何将元素中的任何数字居中

7 个答案: