Question

我试图将圆圈中间的文字与我的下方脚本对齐，但似乎无法让它在水平和垂直方向上对齐。

＆＃13;

.circle {
  background: rgba(72, 156, 234, 1);
  background: -moz-linear-gradient(left, rgba(72, 156, 234, 1) 0%, rgba(31, 123, 229, 1) 100%);
  background: -webkit-gradient(left top, right top, color-stop(0%, rgba(72, 156, 234, 1)), color-stop(100%, rgba(31, 123, 229, 1)));
  background: -webkit-linear-gradient(left, rgba(72, 156, 234, 1) 0%, rgba(31, 123, 229, 1) 100%);
  background: -o-linear-gradient(left, rgba(72, 156, 234, 1) 0%, rgba(31, 123, 229, 1) 100%);
  background: -ms-linear-gradient(left, rgba(72, 156, 234, 1) 0%, rgba(31, 123, 229, 1) 100%);
  background: linear-gradient(to right, rgba(72, 156, 234, 1) 0%, rgba(31, 123, 229, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#489cea', endColorstr='#1f7be5', GradientType=1);
  border-radius: 50%;
  height: 80px;
  width: 80px;
  position: relative;
  box-shadow: 0 0 0 5px #F1F1F1;
  margin: 10px;
  color: #6F0;
  vertical-align: middle;
}

.text_circle {
  font-size: 36px;
  margin-bottom: 50px;
  vertical-align: middle;
}

＆＃13;

<div align="center" class="circle">
  <span class="text_circle">5</span>
</div>

＆＃13;

Answer 1

只要你只有一行文字，一个简单的诀窍是将line-height设置为圆圈的height：

.circle {
  background: rgba(72, 156, 234, 1);
  border-radius: 50%;
  height: 80px;
  width: 80px;
  position: relative;
  box-shadow: 0 0 0 5px #F1F1F1;
  margin: 10px;
  color: #6F0;
  vertical-align: middle;
}

.text_circle {
  font-size: 36px;
  margin-bottom: 50px;
  line-height: 80px;
}

<div align="center" class="circle"><span class="text_circle">5</span></div>

Answer 2

您的问题有两种解决方案。

<强>一

将position:relative属性分配给.circle

.circle {
   position:relative;
}

将以下属性添加到text_circle

.text_circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

<强>两个

将line-height属性分配给具有相同高度的circle。

.circle {
  line-height: 80px;
}

用css对齐圆圈中间的文本

2 个答案: