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”以“水平中心对齐”的方式显示。

但是使用“ display：inline”属性对我来说不起作用。

有人可以帮忙吗？

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

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>

UI字段未水平居中对齐

2 个答案: