我如何响应式地将< div> [英] How do I responsively center text inside of a <div>

问题描述

我有一个< div> ，其中包含三个< div> s。
在< div> 元素中的每一个元素中都有一个< p> 嵌套元素来制作径向进度条。我需要的是将文本置于圆圈中间，并使用纯CSS进行响应。我需要这样的东西：

< img src =https://i.stack.imgur.com/nM5UV.pngalt =通缉结果>

代码有缺陷，就像< span> 中的< p> ，但是我正在使用新版本修复您提供的帮助。

.radius-container div {-webkit- box-flex：1; -ms-flex：1; flex：1;}。radius-container div：first-child {margin-right：1％;}。radius {padding-top：11em;身高：30em; text-align：center; border：1px solid＃858280;显示：块;边界半径：50％; width：100％;}。radius3 {position：relative;填充顶部：10％;身高：15em;宽度：50％; text-align：center; border：1px solid＃858280; border-left：0; border-bottom：0; border-right-right-radius：100％;显示：块; margin-left：15em;}。radius3 p {position：absolute;右：50％; top：65％;}

< div class =半径容器> < 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>

另见

  .center-element {
 position：absolute; 
 top：50％; 
剩下：50％; 
 transform：translate（-50％，-50％）; 
} 
  

希望有所帮助，有任何疑问请告诉我。干杯队友：）

I have a <div> that contains three <div>s. In each of those <div> elements is a <p> element with text and 2 nested elements to make a radial progress bar. What I need is to put the text in the middle of the circles, and do it responsively using pure CSS. I need something like this:

The code has flaws, like that <p> inside of a <span> but I am fixing it in the new version with the help you guys provide.

.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>

See also this jsFiddle

解决方案

After researching for long time for this issue, I found an generic solution which solve me for this kind of requeriments. I am proud of it, simple and elegant :)

.center-element{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Hoping it helps, any doubt let me know. Cheers mate :)

这篇关于我如何响应式地将&lt; div&gt;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！