我有一个 <div>
包含三个 <div>
秒。
在每一个<div>
元素是一个 <p>
带有文本的元素和 2 个嵌套元素组成一个径向进度条。我需要的是将文本放在圆圈中间,并使用纯 CSS 进行响应。我需要这样的东西:
代码有缺陷,比如<p>
在 <span>
里面但在你们提供的帮助下,我正在新版本中修复它。
.radius-container div {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.radius-container div:first-child {
margin-right: 1%;
}
.radius {
padding-top: 11em;
height: 30em;
text-align: center;
border: 1px solid #858280;
display: block;
border-radius: 50%;
width: 100%;
}
.radius3 {
position: relative;
padding-top: 10%;
height: 15em;
width: 50%;
text-align: center;
border: 1px solid #858280;
border-left: 0;
border-bottom: 0;
border-top-right-radius: 100%;
display: block;
margin-left: 15em;
}
.radius3 p {
position: absolute;
right: 50%;
top: 65%;
}
<div class="radius-container">
<div><span class="radius"><p>SERBIAN<br>100%</p></span></div>
<div><span class="radius"><p>ENGLISH<br>100%</p></span></div>
<div><span class="radius3"><p>GERMAN<br>25%</p></span></div>
</div>
另见 jsFiddle
最佳答案
在对这个问题进行了长时间的研究之后,我找到了一个解决此类要求的通用解决方案。我很自豪,简单而优雅:)
.center-element{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
希望对您有所帮助,有任何疑问请告诉我。干杯伙计:)
关于html - 我如何响应地将 <div> 中的文本居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41721586/