输入标签的CSS

Question

我需要一种干净的方式将标签放置在下面的文本输入字段。标签需要与输入

居中对齐

.scale-options {
margin-top: 56px;
margin-left: auto;
margin-right: auto;
display: flex;
justify-content: space-between;
width: 1100px;
}
.scale-yes,
.scale-no,
.scale-weight {
display: inline-flex;
justify-content: center;
}
.scale-yes,
.scale-no {
width: 313px;
}
.scale-weight input {
width: 233px;
display: block;
}
.scale-weight label {
text-transform: uppercase;
display: block;
position: relative;
}

<div class="scale-options">
<div class="scale-yes">
<Button>yes</Button>
</div>
<div class="scale-weight">
<input type="text" name="scaleWeight" value="24.5kg" disabled>
<label for="scaleWeight" class="scale-weight-label">12.5</label>
</div>
<div class="scale-no">
<Button>no</Button>
</div>
</div>

https://jsfiddle.net/chalcrow/wzpduq2h/3/

我已经尝试了很多方法，比如为输入和标签设置display:block，并在两个元素上使用clear: both。我也尝试过通过设置标签的相对位置来进行定位，但由于某种原因，它破坏了其他布局的一部分。我还尝试设置高度和宽度的输入和标签，并尝试在这里的建议https://stackoverflow.com/a/3463670/1549918(有其他建议的答案对这个问题-我看着他们所有，他们要么太hacky或不工作，当我尝试他们)

Answer 1

问题是，您为.scale-weight声明了display: inline-flex，因此使用默认的flex-direction: row使用flexx，只需从列表中删除类选择器，您在其中声明flexbox。之后你可以用text-align: center;

对齐标签的文本

.scale-options {
margin-top: 56px;
margin-left: auto;
margin-right: auto;
display: flex;
justify-content: space-between;
}
.scale-yes,
.scale-no /* , *//* removed */
/* .scale-weight *//* removed */ {
display: inline-flex;
justify-content: center;
}
.scale-yes,
.scale-no 
{
width: 313px;
}
.scale-weight input {
width: 233px;
display: block;
}
.scale-weight label {
text-transform: uppercase;
display: block;
/* position: relative; *//* removed as it doesn't do anything and has no absolute child */
text-align: center; /* added */
}

<div class="scale-options">
<div class="scale-yes">
<Button>yes</Button>
</div>
<div class="scale-weight">
<input type="text" name="scaleWeight" value="24.5kg" disabled>
<label for="scaleWeight" class="scale-weight-label">12.5</label>
</div>
<div class="scale-no">
<Button>no</Button>
</div>
</div>