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 <span class="user">
. This will be the left cell.
As flexbox will display the childs as cells, I added a new <span>
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 <span>
as you
are normally not allowed to put a "block" type of element into an "inline" type
of element.
Replaced <b>
by <strong>
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>