html - 使用 css/flex 以不同方式对齐元素

Question

我现在正在做一个表格。我想制作 <h>标签在文本字段的开头对齐，并使文本字段位于中心。然而，textfield 和 <h>标签现在居中对齐。我怎样才能按照我的预期对齐它们？

    <div class="vertical-offset--small inner-contact" style="display:flex; flex-direction: column; align-items: center; justify-content: center">



            <h5 style="display:inline">* First Name:</h5>
            <input type="text" class="form-control textfield-control textfield" ng-class id="first_name" name="first_name" ng-model="formData.first_name" style="width: 90%" ng-blur="realtimeSave()" required>
            <br>

            <h5>* Last Name:</h5>
            <input type="text" class="form-control textfield-control textfield" ng-class id="last_name" name="last_name" ng-model="formData.last_name" style="width: 90%" ng-blur="realtimeSave()" required>
            <br>

            <h5>* Email:</h5>
            <input type="text" class="form-control textfield-control textfield" ng-class id="email" name="email" ng-model="formData.email" style="width: 90%" ng-blur="realtimeSave()" required>
            <br>

            <h5>* My Question:</h5>
            <textarea id="question" name="question" ng-model="formData.question" ng-blur="realtimeSave()" style="width: 90%; height: 150px;" class="form-control textfield-control textfield" required>
            </textarea>
            <br>
            <br>
            <br>

            <div style="text-align:center">
                <button ng-click="sendEmail($event)" class="button button-form-success button--primary">
                    Submit
                </button>
            </div>
    </div>

在 div 上，我调用以下样式:

 style="display:flex; flex-direction: column; align-items: center; justify-content: center"

Answer 1

在每个标签上，添加以下样式:

h5.tag {
  align-self: flex-start;
}

请参阅此代码段中的示例:

h5.tag {
  align-self: flex-start;
}

<div class="vertical-offset--small inner-contact" style="display:flex; flex-direction: column; align-items: center; justify-content: center">

  <input type="hidden" name="_subject" value="Submission from FoundVisa!" />

  <h5 style="display:inline">* First Name:</h5>
  <input type="text" class="form-control textfield-control textfield" ng-class id="first_name" name="first_name" ng-model="formData.first_name" style="width: 90%" ng-blur="realtimeSave()" required>
  <br>

  <h5>* Last Name:</h5>
  <input type="text" class="form-control textfield-control textfield" ng-class id="last_name" name="last_name" ng-model="formData.last_name" style="width: 90%" ng-blur="realtimeSave()" required>
  <br>

  <h5>* Email:</h5>
  <input type="text" class="form-control textfield-control textfield" ng-class id="email" name="email" ng-model="formData.email" style="width: 90%" ng-blur="realtimeSave()" required>
  <br>

  <h5>* My Question:</h5>
  <textarea id="question" name="question" ng-model="formData.question" ng-blur="realtimeSave()" style="width: 90%; height: 150px;" class="form-control textfield-control textfield" required>


    <div style="text-align:center">
      <button ng-click="sendEmail($event)" class="button button-form-success button--primary">
        Submit
      </button>
    </div>
</div>