如何在另一个 div 内动态改变宽度的 div 上居中文本？答案

【问题标题】：How do I center text over a div that dynamically changes width within another div?如何在另一个 div 内动态改变宽度的 div 上居中文本？
【发布时间】：2020-05-04 11:43:12
【问题描述】：

我正在 React 中为一个显示自动化结果的应用程序创建一个组件。我正在尝试创建一个显示通过测试百分比的自定义进度条。但是，当我尝试将文本居中时，它相对于内部 div 居中。

我的进度条代码是：

import React from 'react';
import classes from './ProgressBar.modules.scss';

const progressBar = props => {
  return (
    <div className={ classes.ProgressBar }>
      <div style={{ width: props.passed }}>
        { props.passed }
      </div>
    </div>
  );
};

我的 SCSS 文件如下所示：

.ProgressBar {
  width: 125px;
  max-width: 125px;
  background: rgb(255, 97, 97);
  border-radius: 4px;
  height: 40px;
  box-shadow: 0 2px 3px rgb(110, 109, 109);
  overflow: hidden;
  transition: 0.2s ease-in-out;
}

.ProgressBar div {
  background: rgb(98, 167, 98);
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  height: 40px;
  padding: 8px 1px 9px 5px;
  box-sizing: border-box;
  font-weight: bold;
  color: white;
}

我尝试使文本居中，但它仅相对于绿色保持居中。如何将其置于两个 div 之上？

【问题讨论】：

css 问题的任何沙盒？

标签： javascript css reactjs sass jsx

【解决方案1】：

将其放在单独的span（或div、p，等等）中：

const progressBar = props => {
  return (
    <div className={ classes.ProgressBar }>
      <div style={{ width: props.passed }}></div>
      <span className="label">{props.passed}</span>
    </div>
  );
};

在外部容器上使用position: relative：

.ProgressBar {
  position: relative; /* <<< */
  width: 125px;
  max-width: 125px;
  background: rgb(255, 97, 97);
  border-radius: 4px;
  height: 40px;
  box-shadow: 0 2px 3px rgb(110, 109, 109);
  overflow: hidden;
  transition: 0.2s ease-in-out;
}

然后设置span的样式，例如：

.ProgressBar .label {
  position: absolute; /* <<< reason for relative positioning */
  top: 0;
  left: 0;
  width: 100%;
  padding: 5px; /* <<< adjust to your needs */
  text-align: center;
}

【讨论】：

【解决方案2】：

如果我理解正确，那么您想在整个进度条中居中百分比，而不是百分比值。

最简单的答案是在没有包含百分比文本的背景的绿色 div 顶部放置一个全宽的空 div，并将文本居中。

【讨论】：

【解决方案3】：

如果您想使文本垂直居中，请尝试将这些行添加到您的 ProgressBar div

display: flex;
flex-direction: column;
justify-content: center;

或者如果你不想使用 flexbox：

vertical-align: middle;
display: table-cell;

如果您想使文本独立于其父元素居中，则不能没有其他元素，例如，具有绝对位置的span。

【讨论】：

【解决方案4】：

我想说，如果您希望文本和进度 div 是独立的，更好的结构是将文本和进度作为兄弟姐妹，例如：

<div class="back">
 <div class="front"></div>
 <p>70%</p>
</div>

您可以将文本与 flexbox 对齐：

.back {
  display: flex;
  align-items: center;
  justify-content: center;  
}

并使进度条绝对定位，以“让开”。

.back {
    position: relative;
}

.front {
    position: absolute;
    top: 0;
    left: 0;
}

当然，由于标签是静态的，它会隐藏在定位的进度条下方。那么你也必须给他定位。

.back > p {
    position: relative;
}

我并不是说这是最好的方法，但我认为这是值得一提的，因为它重新排列了组件层次结构，我认为你应该这样做，并且它使文本与 flexbox 居中。

.back {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

    width: 300px;
    height: 60px;
    background: purple;
    border-radius: 8px;
    overflow: hidden;
}

.front {
  position: absolute;
  top: 0;
  left: 0;
  
    width: 70%;
    height: 100%;
    background: orange;
}

p {
  position: relative;
}

<div class="back">
  <div class="front"></div>
  <p>70%</p>
</div>

【讨论】：