[分享]css中如何让圆与文字居中

在CSS中，让圆与文字居中是非常常见的需求。以下将介绍两种实现方式：

方法一：
.circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #f00;
    display: inline-block;
    vertical-align: middle;
}
.text {
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
}

<div>
    <div class="circle"></div>
    <span class="text">这是一段文字</span>
</div> 

这种方法利用了行内块元素的特性，将圆和文字都设置为行内块元素，并利用vertical-align: middle将它们垂直居中对齐。需要注意的是，这里的父元素<div>也需要设置为行内块元素，否则无法实现对齐。

方法二：
.box {
    position: relative;
}
.circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #f00;
}
.text {
    position: absolute;
    top: 50%;
    left: 60%;
    transform: translateY(-50%);
}

<div class="box">
    <div class="circle"></div>
    <span class="text">这是一段文字</span>
</div> 

这种方法利用了绝对定位和transform属性来实现对齐。将圆设置为绝对定位，然后用top: 50%; left: 50%; transform: translate(-50%, -50%)来使其居中对齐。文字也设置为绝对定位，并用top: 50%; left: 60%; transform: translateY(-50%)来使其距离圆有一定距离且垂直居中对齐。

以上两种方法都可以很好地实现圆与文字的居中对齐，具体使用哪一种方法可以根据具体场景来选择。