使用CSS / Flex以不同方式对齐项目

JoHksi 发表于 Dev

约克西

我正在制作表格。我想使<h>标签在文本字段的开始处对齐，并使文本字段位于中心。但是，文本字段和<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"

ghost_dad

在每个上tags，添加以下样式：

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>