How to horizontally align text of input-field to that of a neighbouring element

Total
1
Shares

Dear stackoverflow community,

I’m looking for a clean way to (horizontally) align the text of an element to that of an angular-material input field.

When using the following code:

_x000D_

_x000D_

<div style="display: flex">
  <div>Hello: </div>
  <mat-form-field>
    <input matInput value="world"/>
  </mat-form-field>
</div>

_x000D_

_x000D_

_x000D_

I end up with something like this:

enter image description here

I need the text of the div, or that of any other element, to be aligned. So, what I am looking for, is something like this:

enter image description here

Main question

How should I go about aligning the two?

Bonus question

The default alignment is quite far off. Do I want something strange here? Am I trying to achieve something fundamentally wrong, or is aligning them ‘manually’ something everybody does?

This question could be related, since the problem is quite similar. But the provided code is, at least for me, too different to extract a possible solution for my question.

Thanks in advance,

Wouter


Solution

I had received a nice answer to my question, however, for some reason it has been removed. I will therefore attempt to repeat what I took from it.


In essence, all you need to do is align the items of your flexbox. Adding align-items:baseline will do the trick if you want to align the items in the flexbox by their text.

Like this:

<div style="display: flex; align-items: baseline">
  <div>Hello: </div>
  <mat-form-field>
    <input matInput value="world"/>
  </mat-form-field>
</div>

Or, as per the previously posted answer:

#box {
  display: flex;
  align-items: baseline;
}
<div id = "box">
  <div>Hello: </div>
  <mat-form-field>
    <input matInput value="world"/>
  </mat-form-field>
</div>

For more information, take a look at this website. It is a comprehensive guide for anything you need to know about the flexbox.

Leave a Reply

Your email address will not be published. Required fields are marked *