html - 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: center在 form .

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>元素本身。