在 HTML 和 CSS 中对齐 3 行

Question

我有 3 行签名需要对齐。问题是：

我希望每个人的名字（admin1、admin2、admin3）都应该在签名行的中间。
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

您可以解决此问题，方法是在父级上使用 display: flex; 和 justify-content: space-between; 到页面上的 space 签名，然后在周围的包装元素上使用 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>

Answer 2

您应该使用 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>

在 HTML 和 CSS 中对齐 3 行

Align 3 lines in HTML and CSS

html

css

css-float