在HTML和CSS中对齐3行

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

您可以通过在父级上使用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>

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>