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

Posted 2023-02-22

【中文标题】如何在另一个 div 内动态改变宽度的 div 上居中文本？

【英文标题】：How do I center text over a div that dynamically changes width within another 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 问题的任何沙盒？

【参考方案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>