在div中居中

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的高度。

工作小提琴

Answer 2

将display:table用于父级，将display: table-cell用于单元格。 该方法必须具有子元素。

尝试这个：

 .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; } 

 <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> 

在这里摆弄

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>