Совместите 3 строки в HTML и CSS

Question

У меня есть 3 строки подписи, которые должны быть выровнены.Проблемы:

1. Я хочу, чтобы имена (admin1, admin2, admin3) каждого из них были в центре строки подписи.
2. 3 строки подписи должны быть слева, по центру и справа от страницы.

.signature {
  border: 0;
  border-bottom: 1px solid #000;
}

.signature_div {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-spacing: 10px;
}

.Column {
  display: table-cell;
}

<div class="signature_div">
  <div class="Column">
    <input type="text" class="signature" /><br /> Admin1
  </div>

  <div class="Column">
    <input type="text" class="signature" /><br /> Admin2
  </div>

  <div class="Column">
    <input type="text" class="signature" /><br /> Admin3
  </div>
</div>

Answer 1

Вы должны использовать flexbox для выравнивания контента.Это невероятно полезно.

.signature {
  border: 0;
  border-bottom: 1px solid #000;
}

.signature_div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack:justify;
      -ms-flex-pack:justify;
          justify-content:space-between;
  width: 100%;
  border-spacing: 10px;
}

.Column {
  text-align:center;
}

<div class="signature_div">
  <div class="Column">
    <input type="text" class="signature" /><br /> Admin1
  </div>

  <div class="Column">
    <input type="text" class="signature" /><br /> Admin2
  </div>

  <div class="Column">
    <input type="text" class="signature" /><br /> Admin3
  </div>
</div>

Answer 2

Вы можете решить эту проблему, используя display: flex; и justify-content: space-between; на родительском элементе, чтобы разместить подписи на странице, а затем используйте text-align: center; на элементе обертки вокруг каждой подписи.

.signature {
  border: 0;
  border-bottom: 1px solid #000;
}

.signature_div {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.signature-wrapper {
  display: block;
  text-align: center;
}

<div class="signature_div">
  <div class="Column">
    <label class="signature-wrapper">
      <input type="text" class="signature" /><br />
      Admin1
    </label>
  </div>

  <div class="Column">
    <label class="signature-wrapper">
      <input type="text" class="signature" /><br />
      Admin2
    </label>
  </div>

  <div class="Column">
    <label class="signature-wrapper">
      <input type="text" class="signature" /><br />
      Admin3
    </label>
  </div>
</div>