Question

使用html / css，我想创建一个带有两行居中文本的完美圆圈，如下图所示。在现代浏览器中最干净/最优雅的方式是什么？我是否必须声明宽度和高度，或者我可以使用padding / border-radius？

HTML

<h2 class="score">92 <br>
    <span class="text">Overall</span>
</h2>

CSS

.score {
   font-family: Arial;
   text-align: center;
   background: #DCAA38;
   border-radius: 50%;
   padding: 15px;
   font-size: 30px;
   color: #fff;
   margin-bottom: 0;
}

.text {
   position: relative;
   margin-top: -20px !important;
   font-weight: 100;
   font-size: 12px;
}

enter image description here

Answer 1

请参见此处：fiddle您需要先创建正方形

.container {
    max-width: 500px;
}
.score {
    font-family: Arial;
    text-align: center;
    background: #DCAA38;
    border-radius: 100px;
    padding: 15px;
    font-size: 30px;
    height:100px;
    width:100px;
    color: #fff;
    margin-bottom: 0;
}
.text {
    position: relative;
    margin-top: -20px !important;
    font-weight: 100;
    font-size: 12px;
}

Answer 2

嘿，像凯青说的那样改变你的班级

.score {
    font-family: Arial;
    text-align: center;
    background: #DCAA38;
    border-radius: 50%;
    padding: 15px;
    font-size: 30px;
    color: #fff;
    margin-bottom: 0;
    height:70px;
    width:70px
}

我添加了相同的高度和宽度属性。

对于响应性，您可以使用em值而不是像素

Answer 3

您缺少尺寸：

.score {
    width:75px;
    height:75px;
    ...
}

Answer 4

我做了this这是两个不同的方法，一个使用表，另一个使用转换。我个人最喜欢第二个，因为我不需要使用这么多div。

.perfect-circle2 {
        font-family: Arial;
        font-weight: 100;
        background: #222;
        display: inline-block;
        text-align: center;
        width: 20%;
        position: relative;
        border-radius: 50%;
        vertical-align: middle;
    padding-bottom: 20%;
    height: 0;


    }
    .content2 {
        position: relative;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    .number, .text {
        display: block;
        color: #FFF;
    }
    .number {
        font-size: 200%
    }
    .text {
        font-size: 100%;
    }

要创建这些示例，我使用了以下代码：

Vertical align

Propotional resizing

创建一个包含两行文本的完美圆圈

4 个答案: