Как разместить текст по центру div, который динамически изменяет ширину внутри другого div? - PullRequest
Новая
       20

Как разместить текст по центру div, который динамически изменяет ширину внутри другого div?

4 голосов
/ 17 января 2020

Я создаю компонент в 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>
  );
};

Мой файл S CSS выглядит следующим образом: 

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

Ответы [ 4 ]

3 голосов
/ 17 января 2020

Поместите его в отдельный 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;
}
1 голос
/ 17 января 2020

Я бы сказал, что если вы хотите, чтобы текст и 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;
}

Конечно, поскольку метка стоит c , он будет прятаться под позиционированным индикатором выполнения. Тогда вам придется его позиционировать тоже. 

.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>
0 голосов
/ 17 января 2020

Если вы хотите расположить текст по центру по вертикали, попробуйте добавить эти строки в ProgressBar div

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

или если вы не хотите использовать flexbox: 

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

Если вы хотите центрировать текст независимо от его родителя, вы не можете обойтись без другого элемента, например, span с абсолютной позицией.

0 голосов
/ 17 января 2020

Если я правильно понимаю, вы хотите центрировать процент по всей шкале прогресса, независимо от значения в процентах.

Самый простой ответ - поместить пустой div с полной шириной поверх зеленого цвета. div без фона, содержащего текст в процентах, и центрирование текста.

...