Question

我有一个圆圈，但它只适用于一行文字。当我尝试第二行时，文本将跳下来。如何编辑我的圆圈以获得第二行？ jsFiddle中的答案最好。

这是我的（我的jsFiddle）：

<table>
    <td style="text-align: center; background-color: #f5f5f5;">
        <div class="circle"><strong> 1.500</strong>  <sup>Eur</sup>
            <br>month</div>
    </td>
</table>

.circle {
    width:100px;
    height:100px;
    border-radius:50px;
    font-size:10px;
    color:#fff;
    line-height:100px;
    text-align:center;
    background:#293a42;
    margin: 0 auto;
}

.circle strong {
    font-size: 20px;
}

.circle sup {
    font-size: 10px;
}

Answer 1

you can do this by removing the line-height and update your css like the below code:


The CSS:

<!-- language: lang-css -->
    .circle {
        background: none repeat scroll 0 0 #293a42;
        border-radius: 50px;
        color: red;
        display: table-cell;
        font-size: 14px;
        height: 100px;
        margin: 0 auto;
        text-align: center;
        vertical-align: middle;
        width: 100px;
    }
<!-- end snippet -->

check this fiddle

Answer 2

您可以通过减少行高并使用填充来定位文本来解决此问题：

.circle {
    width:100px;
    height:68px;
    border-radius:50px;
    font-size:14px;
    color:red;
    line-height:20px;
    text-align:center;
    background:#293a42;
    margin: 0 auto;
    padding:32px 0 0;
}

Answer 3

我偶然发现了this answer，发现它非常漂亮：

.circle {
  width: 120px;
  height: 120px;
  display: flex;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
}

但是它需要flex。

CSS - 使用多行编辑圆圈

3 个答案: