Vertical text alignment

boomzilla

I want "Stuff:" and "Filter:" to have the same vertical alignment but can't figure this out. Using Bootstrap 5.1. Note the height is somewhat arbitrary here, but also doesn't seem to affect anything. I just made it bigger than the context (and the same between the two).

Here's a jsFiddle: https://jsfiddle.net/8zfg1vbo/

And copied here as well:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="d-flex">
  <div class="me-2">
    <div class="my-1 " style="height: 55px;">
      Stuff:
    </div>
    <ul class="list-group">
    </ul>
  </div>
  <div>
    <div class="my-1" style="height: 55px;">
      <label class="align-middle">Filter:</label>
      <input type="text">
    </div>
  </div>
</div>

DogsB

@boomzilla said in Vertical text alignment:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="d-flex">
  <div class="me-2">
    <div class="my-1 " style="height: 55px;">
      Stuff:
    </div>
    <ul class="list-group">
    </ul>
  </div>
  <div>
    <div class="d-flex flex-row">
      <div class="my-1" style="height: 55px;">
        <label class="align-middle">Filter:</label>
      </div>
      <div>
        <input type="text">
      </div>
    </div>
  </div>
</div>

Incoming hackery. The input is breaking everything so I kicked it into its own div. Then those two into a div of their own to treat them as a unit. Not my worst hackery. Probably good for nothing but this example.

boomzilla

@DogsB yep, that works. No worse than my usual CSS hackery.

boomzilla

@loopback0 said in Semi-quasi-unofficial unhelpful comments:

@boomzilla said in Vertical text alignment:

I want "Stuff:" and "Filter:" to have the same vertical alignment but can't figure this out.

<div>

Have you tried <table>?

Motherfucker. Of course that works. Why does the presence of the input mess up the vertical alignment in the divs but not the table cells?

https://jsfiddle.net/563epv7b/

<table>
  <tbody>
    <tr>
      <td>Stuff:</td>
      <td>Filter: <input type="text"></td>
    </tr>
  </tbody>
</table>

Zenith

@boomzilla I think you know why

DIV: 0
TABLE: 321389746783264872365 + 1

kazitor

@boomzilla This seems to work fine; no hackery necessary

<div class="d-flex align-items-center">
  <div class="me-2">
    <div>
      Stuff:
    </div>
    <ul class="list-group">
    </ul>
  </div>
  <div>
    <div>
      <label>Filter:</label>
      <input type="text">
    </div>
  </div>
</div>

And those inner divs can be lost fine, if that’s permitted by the original design

edit2: FYI https://getbootstrap.com/docs/5.2/layout/columns/#vertical-alignment