Question

如何定位div中的文字以使数字在圆圈中居中？ https://jsfiddle.net/Amidi/nevg4gcq/3/

<div class="beads">1</div>
<div class="beads">2</div>
<div class="beads">3</div>

.beads{
    background-color: coral;
    border-radius: 100%;
    height: 35px;
    width: 35px;
    text-align: center;
    color: whitesmoke;
    margin-top: 5px;
}

Answer 1

只需让line-height: 35px;制作文字中心即可。 line-height等于div的高度。

<强> Working Fiddle

Answer 2

将display:table用于父级，将display: table-cell用于单元格。你必须有这种方法的子元素。

试试这个：

＆＃13;

.beads {
  background-color: coral;
  border-radius: 100%;
  height: 35px;
  width: 35px;
  text-align: center;
  color: whitesmoke;
  margin-top: 5px;
  display: table;
}
.beads span {
  display: table-cell;
  vertical-align: middle;
}

＆＃13;

<div class="beads"><span>1</span>
</div>
<div class="beads"><span>2</span>
</div>
<div class="beads"><span>3</span>
</div>
<div class="beads"><span>4</span>
</div>
<div class="beads"><span>5</span>
</div>
<div class="beads"><span>6</span>
</div>
<div class="beads"><span>7</span>
</div>

＆＃13;

Fiddle here

Answer 3

试试这个：

   .beads{
        background-color: coral;
        border-radius: 100%;
        height: 35px;
        width: 35px;
        text-align: center;
        color: whitesmoke;
        margin-top: 5px;
        line-height: 35px
    }

<div class="beads">1</div>
<div class="beads">2</div>
<div class="beads">3</div>

div中的中心文字

3 个答案: