创建一个有两行文本的完美圆圈答案

【问题标题】：Create a perfect circle having two lines of text创建一个有两行文本的完美圆圈
【发布时间】：2014-06-28 05:43:25
【问题描述】：

使用 html/css，我想创建一个带有两行居中文本的完美圆圈，如下图所示。在现代浏览器中工作的最干净/最优雅的方式是什么？我必须声明宽度和高度还是可以只使用填充/边框半径？

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

【问题讨论】：

“最干净”是非常主观的。您想支持哪些浏览器？
为圆形或边框半径定义相等比例的宽度和高度 50% 将完成您在小提琴中看到的内容。除此之外，我不认为你的方法特别不干净（假设你正在做完全支持边界半径的技巧）

标签： html css

【解决方案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;
}

【讨论】：

感谢您的回答，即使他们都有text-align: center;，分数和文本是否没有居中是有原因的？ jsfiddle.net/qxX7B/3
当前在小提琴中的.text 上的position:absolute; 已设置，这将否定任何文本对齐（该定位需要完全消失）。
这里是不需要任何定位的版本-jsfiddle.net/qxX7B/14

【解决方案2】：

您缺少尺寸：

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

【讨论】：

声明维度是唯一的选择吗？
关键是您希望宽度和高度相同，以便使其成为圆形而不是椭圆，这发生在您的 JSFiddle 中，因为 H2 下降到它在宽度大于高度的 DOM。因此，如果您将其声明为相同大小（任何大小），它将呈现完美的圆形边框半径：50%

【解决方案3】：

我制作了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】：

嘿，就像凯青说的那样改班

.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 值而不是像素

【讨论】：

是的，我可能会调查他们的。声明高度/宽度是唯一的方法吗？
是的，需要高度宽度才能使半径属性起作用。 :-)