CSS: Center element vertically

Question

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"?

Manuel Meister · Answer 1 · 2022-03-18T13:29:18.097

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>

edited Mar 18 '22 at 13:29

answered Mar 18 '22 at 13:26

Manuel Meister

332
3
12

1

That's exactly right ! Removing my answer which is the same – julien.giband Mar 18 '22 at 13:27
@Manuel Sorry - Is there a way to do this only by messing with style of "cssthis"? I think the answer might be no. – BGS Mar 18 '22 at 19:28
@BGS totally depends what existing styles are already present on everything else. – Manuel Meister Mar 19 '22 at 21:39

score 0 · Answer 2 · edited Mar 19 '22 at 21:57

0

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

edited Mar 19 '22 at 21:57

Dharman

30,962
25
85
135

answered Mar 18 '22 at 13:11

Sombra43

47
2

Maik Lowrey · Answer 3 · 2022-03-18T13:22:26.323

0

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>

edited Mar 18 '22 at 13:22

answered Mar 18 '22 at 13:14

Maik Lowrey

15,957
6
40
79

1

Instead of using `margin-top:-30px` for .field-group label , you should use ` margin-bottom: auto;` and it will stick label to top dynamically. – Optimum Creative Mar 18 '22 at 13:20
1

@OptimumCreative Thank you very much. I was also thinking about how I could do it differently. Because margin-top didn't really feel like a clean solution. But margin-bottom: auto; does. Thank you! – Maik Lowrey Mar 18 '22 at 13:23

CSS: Center element vertically

3 Answers3