div中的文字内容

-1

如何只将目标文字内的文字定位在圆圈中？ https://jsfiddle.net/Amidi/nevg4gcq/3/div中的文字内容

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

来源

2016-02-26 Mahmud Adam

加上'的line-height：35px;'。或者使用'padding'来玩并移除'height'。 –

另外，一次发布一个问题。然后在你的第一个问题得到解答时做出跟进问题。 –

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

Fiddle here

来源

2016-02-26 06:09:18 Rayon

只要给line-height: 35px;，使文字中心。 line-height等于div的高度。

Working Fiddle

来源

2016-02-26 06:09:25 ketan

没有难过的感觉，但是这种方法会失败，如果父母的身高改变（不是_35px_） – Rayon

@RayonDabre是检查我的答案。它等于它的高度。如果改变高度，那么改变'line-height'等于 – ketan

这就是我特别提到它的原因......;（ – Rayon

试试这个：

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

来源

2016-02-26 06:12:18

div中的文字内容

回答

相关问题