Question

我有以下

.circle {
  font-size: 4.42em;
  font-weight: 300;
  width: 106px;
  border-radius: 50%;
  /*color: white;*/
  line-height: 94px;
  vertical-align: middle;
  height: 106px;
  margin: 0 auto;
  box-shadow: 0px 0px 8.73px 0.27px rgba(0, 0, 0, 0.39);
  cursor: pointer;
  transition: all 0.4s ease-in-out;
}

<div class="circle">+</div>

不幸的是，每当我将行高设置为等于圆的高度时，圆内的+符号就不会在中间对齐。我做错了什么？

Answer 1

您可以使用以下风格：

＆＃13;

.circle
{
    font-size: 4.42em;
    font-weight: 300;
    width: 106px;
    border-radius: 50%;
    color: #000000;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    height: 106px;
    margin: 0 auto;
    box-shadow: 0px 0px 8.73px 0.27px rgba(0, 0, 0, 0.39);
    cursor: pointer;
    transition: all 0.4s ease-in-out;
}

＆＃13;

<div class="circle">+</div>

＆＃13;

Answer 2

将您的line-height更改为与height匹配。

.circle {
  font-size: 4.42em;
  font-weight: 300;
  width: 106px;
  border-radius: 50%;
  color: white;
  line-height: 106px;
  vertical-align: middle;
  height: 106px;
  margin: 0 auto;
  box-shadow: 0px 0px 8.73px 0.27px rgba(0, 0, 0, 0.39);
  cursor: pointer;
  transition: all 0.4s ease-in-out;
  text-align: center;
  background-color: red;
}

<div class="circle">+</div>

Answer 3

将line-height设置为相同height，但您不需要vertical-align，但确实需要text-align:center;

.circle {
  font-size: 4.42em;
  font-weight: 300;
  width: 106px;
  border-radius: 50%;
  /*color: white;*/
  line-height: 106px;
  height: 106px;
  margin: 0 auto;
  box-shadow: 0px 0px 8.73px 0.27px rgba(0, 0, 0, 0.39);
  cursor: pointer;
  text-align:center;
  transition: all 0.4s ease-in-out;
}

<div class="circle">+</div>

Answer 4

您有正确的想法，只需添加text-align: center;并将line-height: 94px;更改为line-height: 106px;

还有一些你不需要的东西： vertical-align: middle; height: 106px;

Answer 5

我只是弯曲它。适用于文本，但可以轻松获取SVG图标。

.circle {
    font-size: 4.42em;
    font-weight: 300;
    width: 106px;
    height: 106px;
    border-radius: 50%;
    color: #000000;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    box-shadow: 0px 0px 8.73px 0.27px rgba(0, 0, 0, 0.39);
    cursor: pointer;
    transition: all 0.4s ease-in-out;
}

<div class="circle">+</div>

居中加上圈内的标志

5 个答案: