Center align text inside a element in a flex row

Question

I have the following html:

<div class="toolbar">
    <span>My title</span>
    <a href="#">User Name</a>
    <a href="#">
      <img src="http://image.flaticon.com/icons/png/128/56/56805.png" />
    </a> 
 </div>

I've used flex box to make the two links to align right and the "My title" text to fill the remaing space, as show in this example: https://jsfiddle.net/tz472j3o/

What I need now is to center both the text and image link vertically in the toolbar. I know i could do this with align-items: center, but this won`t work for me because i need to change the background color of the link on mouse hover, so I need the link height to take all vertical space in the toolbar.

So, what i need is the a element to stretch vertically to take all available space, but to center its text vertically inside it.

Since your toolbar has a fixed height, you can just use margin / line-height? — Goombah, Nov 03 '16 at 12:02
Does this answer your question? [How to vertically align text inside a flexbox?](https://stackoverflow.com/questions/25311541/how-to-vertically-align-text-inside-a-flexbox) — Vega, Mar 02 '20 at 17:55

score 3 · Accepted Answer · answered Nov 03 '16 at 12:11

Make the link display:flex and align-items:center.

.toolbar {
  background-color: lightblue;
  height: 40px;
  display: flex;
}
span {
  flex-grow: 1;
  align-self: center;
}
a {
  margin-left: 5px;
  display: flex;
  align-items: center;
}
a:hover {
  background-color: white;
}
img {
  width: 20px;
}

<div class="toolbar">
  <span>My title</span>
  <a href="#">User Name</a>
  <a href="#">
    <img src="http://image.flaticon.com/icons/png/128/56/56805.png" />
  </a>
</div>

score 0 · Answer 2 · answered Nov 03 '16 at 12:13

0

Use vertical-align:middle on the img thats in the a:

.toolbar a img
{
  vertical-align:middle;
}

answered Nov 03 '16 at 12:13

Stuart

6,630
2
24
40

Center align text inside a element in a flex row

2 Answers2