将一个标签以接触形式与顶行而不是中间对齐

Question

在我的联系表中，我有几个标签和输入字段。默认情况下，“消息”标签默认位于其5行输入文本区域的中间。我正在尝试将一个标签与第一行对齐。 vertical-align: top不起作用。

如何将这一个标签对准顶部而不是中间？

这是我的表单代码：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />

<form method="post" role="form">

  <div class="row">
    <div class="contact-icon">
      <i class="fas fa-user"></i>
    </div>


    <div class="form-inline">
      <div class="col-md-12  form-group">
        <label for="name">your name</label>
        <span class="fieldSpan">
                          <input type="text" 
                          name="name" 
                          id="input-field-name"
                          class="form-control" 
                          placeholder="your name" 
                          value=""> 
                    </div>
                </div>
            </div>

        <div class="row">
              <div class="contact-icon">
                <i class="fas fa-envelope"></i>
              </div>

              <div class="form-inline">
              <div class="col-md-12 form-group">
                      <label for="email">your email address</label>
                      <span class="fieldSpan">
                      <input type="email" 
                      name="email" 
                      id="input-field-email"
                      class="form-control" 
                      placeholder="yourname@website.com" 
                      value="">
                  </div>
                </div>
         </div>

        <div class="row">
              <div class="contact-icon">
                  <i class="fas fa-pencil-alt"></i>
              </div>
        
              <div class="form-inline">
                <div class="col-md-12 form-group">
                        <label for="message">your message</label>
                        <span class="fieldSpan vertical-align:top">
                        <textarea name="message" 
                        rows="5" 
                        id="input-field-message"
                        class="form-control" 
                        placeholder="your message">
                        </textarea>
                        <br>
                        <br>
                    </div>
                    </div>
              </div>

Answer 1

由于此处使用了Flexbox，因此可以使用align-self: flex-start。

.message-row .form-inline label {
  align-self: flex-start;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />

<form method="post" role="form">

  <div class="row">
    <div class="contact-icon">
      <i class="fas fa-user"></i>
    </div>


    <div class="form-inline">
      <div class="col-md-12  form-group">
        <label for="name">your name</label>
        <span class="fieldSpan">
                          <input type="text" 
                          name="name" 
                          id="input-field-name"
                          class="form-control" 
                          placeholder="your name" 
                          value=""> 
                    </div>
                </div>
            </div>

        <div class="row">
              <div class="contact-icon">
                <i class="fas fa-envelope"></i>
              </div>

              <div class="form-inline">
              <div class="col-md-12 form-group">
                      <label for="email">your email address</label>
                      <span class="fieldSpan">
                      <input type="email" 
                      name="email" 
                      id="input-field-email"
                      class="form-control" 
                      placeholder="yourname@website.com" 
                      value="">
                  </div>
                </div>
         </div>

        <div class="row message-row">
              <div class="contact-icon">
                  <i class="fas fa-pencil-alt"></i>
              </div>
        
              <div class="form-inline">
                <div class="col-md-12 form-group">
                        <label for="message">your message</label>
                        <span class="fieldSpan vertical-align:top">
                        <textarea name="message" 
                        rows="5" 
                        id="input-field-message"
                        class="form-control" 
                        placeholder="your message">
                        </textarea>
                        <br>
                        <br>
                    </div>
                    </div>
              </div>