UI 字段未在水平方向居中对齐

Question

我有一段示例 UI 代码，如下所示：

<form class="form form-horizontal">
<div style="display: inline">
<control-group v-field="student.status" width="6">
<div style="display: inline">
<span class="student-marks" id="studentMarks">{{studentMarks}}</span>
</div>
</control-group>
</div>
</form>

基本上，我希望"student.status"和"studentMarks"以"中心-水平对齐"的方式显示。

但这对"显示：内联"属性不起作用。

有人可以帮忙吗？

Answer 1

诚然，我有点不确定您要查找的内容，但听起来您只是想要
text-align: centeronform.

form {
text-align: center;
}

<form class="form form-horizontal">
<div style="display: inline">
<control-group v-field="student.status" width="6">
<div style="display: inline">
<span class="student-marks" id="studentMarks">{{studentMarks}}</span>
</div>
</control-group>
</div>
</form>

请注意，text-align: center和display: inline在应用于同一元素时不会协同工作，但如果您愿意删除display: inline，则可以text-align: center应用于<div>元素本身。

Answer 2

.tbl{
display: table;  
width: 100%;
}
.cell{
display:table-cell;
text-align:center;
width:100%;
vertical-align: middle;
height: 180px;
background: #ececec;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<form class="form form-horizontal">
<div style="display: inline">
<control-group v-field="student.status"   class="tbl">
<div class="cell">
<span class="student-marks" id="studentMarks">{{studentMarks}}</span>
</div>
</control-group>
</div>
</form>