如何响应式地将文本居中在 <div> 中? [英] How do I responsively center text inside of a &lt;div&gt;

问题描述

我有一个

包含三个

.在每个 <div> 元素中，有一个

元素，带有文本和 2 个嵌套元素，用于制作径向进度条.我需要的是将文本放在圆圈的中间，并使用纯 CSS 响应式地进行.我需要这样的东西:

代码有缺陷，比如 位于 中，但我正在新版本中修复它，并在你们提供的帮助下.

.radius-container div {-webkit-box-flex: 1;-ms-flex: 1;弹性:1；}.radius-container div:first-child {右边距:1%；}.半径 {填充顶部:11em；高度:30em；文本对齐:居中；边框:1px 实心 #858280;显示:块；边界半径:50%；宽度:100%；}.radius3 {位置:相对；填充顶部:10%；高度:15em；宽度:50%；文本对齐:居中；边框:1px 实心 #858280;左边界:0；边框底部:0；边框右上角半径:100%；显示:块；左边距:15em；}.radius3 p {位置:绝对；正确:50%；顶部:65%；}

<div><span class="radius"><p>塞尔维亚语<br>100%</p></span></div><div><span class="radius"><p>ENGLISH<br>100%</p></span></div><div><span class="radius3"><p>德语<br>25%</p></span></div>

另见这个jsFiddle

解决方案

经过长时间的研究这个问题，我找到了一个通用的解决方案来解决这种需求.我以它为荣，简单而优雅:)

.center-element{位置:绝对；顶部:50%；左:50%；变换:翻译(-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 solves 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 :)

这篇关于如何响应式地将文本居中在 <div> 中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！