Align multiline text vertically center next to span icon

February 13, 2023

I have this code:
Im using UIKIT for the styling.

<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.15.24/dist/css/uikit.min.css" />

<!-- UIkit JS -->
<script src="https://cdn.jsdelivr.net/npm/uikit@3.15.24/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.15.24/dist/js/uikit-icons.min.js"></script>


<div class="uk-inline uk-text-small">
        <b>Jelle Botman</b><br/>
        My Company
        <span class="uk-icon-button uk-margin-small-right" uk-icon="user"></span>
        <div uk-dropdown>
            <a href=''>Profiel</a><br/>
            <a href=''>Uitloggen</a>
        </div>
    </div>

I would like to have this:
The text vertically centered in the middle next to the icon.

Problems:

Text is not vertically aligned in the middle
The line break between my name and the company is to high

I tried vertical-align: middle but that didn’t fix my problem.
How can I achieve this without big modifications to my html structure?

>Solution :

I would add a class user-card in order to add custom CSS and use
flexbox to help
solving your problem. Then put the user text into a container, here I put
it in a . This will be the left cell.

As flexbox will display the childs as cells, I added a new  around the
icon and the dropdown menu. This will be the right cell.

And to be HTML compliant I replaced the dropdown <div> by a  as you
are normally not allowed to put a "block" type of element into an "inline" type
of element.

Replaced  by  to be HTML compliant too.

<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.15.24/dist/css/uikit.min.css" />

<!-- UIkit JS -->
<script src="https://cdn.jsdelivr.net/npm/uikit@3.15.24/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.15.24/dist/js/uikit-icons.min.js"></script>

<style type="text/css">

.user-card {
  display: flex;
  flex-direction: row;
  column-gap: 0.5em;
  align-content: center;
  line-height: 1.2em;
}

.user-card .user {
  text-align: right;
}

.user-card .uk-icon-button {
  border: 1px solid;
}

</style>

<div class="uk-inline uk-text-small user-card">
  <span class="user">
    <strong>Jelle Botman</strong><br />
    My Company    
  </span>
  <span>
    <span class="uk-icon-button uk-margin-small-right" uk-icon="user"></span>
    <span uk-dropdown>
      <a href=''>Profiel</a><br />
      <a href=''>Uitloggen</a>
    </span>
  </span>
</div>