Как я могу расположить свои номера один под другим?

#html #css

Вопрос:

У меня есть следующая таблица

 table td {
    width: 200px;
    text-align: center;
}

.red {
    border:1px solid red;
}

 <table>
  <thead>
      <tr>
          <th>Price</th>
      </tr>
  </thead>
  <tbody>
    <tr>
        <td class="red">$ 11.122,00</td>
    </tr>
    <tr>
        <td class="red">$ 11.1,00</td>
    </tr>
    <tr>
        <td class="red">$ 11.122,00232</td>
    </tr>
    <tr>
        <td class="red">$ 11.122,00</td>
    </tr>
  </tbody>
</table>

мне нужно, чтобы мои числа были сосредоточены в td нем самом, но я не могу найти способ расположить числа одно под другим, чтобы конечный результат в таблице был одинаковым, если я сделаю

 table td {
    width: 200px;
    text-align: right;
}

но на этом пути я просто перемещаю числа справа, и они одно за другим. Но мне нужны они centered с номерами один под другим

1. Для дальнейшего использования может быть очень полезно включить краткое изображение макета, которое демонстрирует результат, которого вы пытаетесь достичь, даже если это приблизительное приближение (до тех пор, пока оно отражает суть). Как есть, описание было немного запутанным и могло быть истолковано по крайней мере парой разных способов.

Ответ №1:

Вы можете вложить свой текст в flex структуру макета, а затем установить min-width значение, равное самому широкому содержимому. Например, что-то вроде этого:

 <td class="red">
  <div class="flex-container">
    <div class="flex-item">$ 11.122,00</div>
  </div>
</td>

 .flex-container {
  display: flex;
  justify-content: center;
}

.flex-item {
  text-align: right;
  min-width: 100px;
}

Если это тот результат, который вам нужен, вот рабочая скрипка.

Или, если вы пытаетесь сделать что-то подобное, вот рабочая скрипка.

1. Но содержимое не центрировано — $ 11.122,00 первая строка не выглядит так, как будто она находится в центре

2. Можете ли вы добавить макет изображения того, что вам нужно?