'CSS: Center element vertically [duplicate]

Background

Here is scenario - https://codepen.io/37816/pen/LYeNPEN

<form class="aui">
  <div class="field-group">
    <label for="comment-input">Comment</label>
    <textarea class="textarea" ></textarea>
    <a id="cssthis" href="#" fieldhelp="" data-helplink="local" style="">
      <span class="aui-icon aui-icon-small aui-iconfont-question-circle"></span>
    </a>
  </div>
</form>

Request

EDIT: Answers so far do not give solution to the question that was asked. Is there a way to adjust id="cssthis" ONLY using inline styling to be able to center vertically to div class="field-group"? enter image description here

cssflexbox


Solution 1:[1]

You can use flexbox. If you only want the question mark centered, you can use align-self: center

/* this next block shows the alignment of the label to the textarea */
.textarea {
  padding: 10px;
}

.field-group {
  display: flex;
  gap: 5px;
  align-items: baseline;
  /* align-items: start; if you don't want to align the label to the text inside the textarea */
}

#cssthis {
  align-self: center;
}
<form class="aui">
  <div class="field-group">
    <label for="comment-input">Comment</label>
    <textarea class="textarea">Content</textarea>
    <a id="cssthis" href="#" fieldhelp="" data-helplink="local" style="">
      <span class="aui-icon aui-icon-small aui-iconfont-question-circle">?</span>
    </a>
  </div>
</form>

Solution 2:[2]

You can use flexbox for this:

.field-group {
  display: flex;
  gap: 20px; 
  align-items: center;
}

.field-group > * {
  display: block;
}

.field-group label {
  margin-bottom: auto;
}
<form class="aui">
    <div class="field-group">
      
      <label for="comment-input">Comment</label>

      <textarea class="textarea" ></textarea>
      <a id="cssthis" href="#" fieldhelp="" data-helplink="local" style="">x
        <span class="aui-icon aui-icon-small aui-iconfont-question-circle"></span>
        </a>
    </div>
</form>

Solution 3:[3]

.field-group{
  display: flex;
  align-items: center;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2
Solution 3 Dharman

Related Questions