Vertically center inline-blocks elements in header

Question

In a header top banner:

#header { background-color: #eaeaea; } 
#header a { display: inline-block; margin-right: 1.5em;  }
.logo { margin-right: 6em; }

<div id="header">
<img src="https://via.placeholder.com/150x120" class="logo">
<a href="">Lorem</a>
<a href="">Ipsum</a>
<a href="">Contact</a>
</div>

what are the main methods used nowadays to center the 3 right links vertically inside the banner?

I know how to do it with position: relative; top:-...px or similar methods or even <table>, but what would be considered nowadays as the most appropriate methods, especially for responsive design?

Would you use flex features for this? If so, how?

I also want stick the group of 3 links to the right border of the screen, such that, if we resize the browser width, it always stays floating along the right border. I was about to use float: right but there's probably a better solution than mixing flex and float?

PS: These last details are not in the linked questions Flexbox: center horizontally and vertically and How to Vertical align elements in a div?, thus it's not a duplicate.

score 1 · Accepted Answer · edited Sep 04 '20 at 05:21

1

Personnaly i would use flex with align-items:center for responsive design.

See the code below:

#header{ 
  background-color: #eaeaea; 
  display:flex;
  align-items:center;
  justify-content:space-between;
} 
#header a{ 
  display: inline-block;
  margin-right: 1.5em;
}
.logo{
  margin-right: 6em;
}

<div id="header">
  <img src="https://via.placeholder.com/150x120" class="logo">
  <div id="links">
    <a href="">Lorem</a>
    <a href="">Ipsum</a>
    <a href="">Contact</a>
  </div>
</div>

edited Sep 04 '20 at 05:21

Basj

41,386
99
383
673

answered Sep 03 '20 at 15:08

Kev Rob

322
2
7

1

Great solution, thanks @KevRob. Would you know how to stick the group of 3 links to the right border of the screen, such that, if we resize the browser width, it always stays floating along the right border? Is this possible while keeping `flex`? I was about to use `float: right` but there's probably a better solution than mixing `flex` and `float`? – Basj Sep 03 '20 at 15:37
1

Yes, there is a lot of solutions. I would put the links within a div with `display:flex` as well and add this css to the '#header': `justify-content : space-between`. Tell me if it works for you. – Kev Rob Sep 03 '20 at 15:45
1

Wonderful @KevRob, it works; I edited your answer to include it, it's perfect now! – Basj Sep 04 '20 at 05:21

score 0 · Answer 2 · edited Sep 03 '20 at 15:22

0

When it comes to vertical centering of text and items, this trick comes in handy:

#header {
   display: flex;
   align-items: center;
}

A more reliable (albiet complicated) method is to use a grid wrapper

.center {
   display: grid;
   grid-template-areas: 'a b c';
   grid-template-rows: 1fr max-content 1fr;
}
.center > * {
   grid-area: b
}

<div id="header">
  <img src="https://via.placeholder.com/150x120" class="logo">
  <a class="center" href=""><span>Lorem</span></a>
  <a class="center" href=""><span>Ipsum</span></a>
  <a class="center" href=""><span>Contact</span></a>
</div>

edited Sep 03 '20 at 15:22

Dharman

30,962
25
85
135

answered Sep 03 '20 at 15:16

spacefluff432

566
3
13

Would you know @HarrisonSmith how to stick the group of 3 links to the right border of the screen, such that, if we resize the browser width, it always stays floating along the right border? Is this possible while keeping `flex`? I was about to use `float: right` but there's probably a better solution than mixing `flex` and `float`? – Basj Sep 03 '20 at 15:37
@Basj What do you mean by "groups" I only see one group of 3 links there. – spacefluff432 Sep 03 '20 at 15:45

AbsoluteBeginner · Answer 3 · 2020-09-03T16:10:20.500

If you don't care about old browsers (IE), you can use place-items, instead of align-items.

#header{ 
  background-color: #eaeaea; 
  display: flex;
  place-items: center;
} 
#header a{ 
  display: inline-block;
  margin-right: 1.5em;
}
.logo{
  margin-right: 6em;
}

<div id="header">
  <img src="https://via.placeholder.com/150x120" class="logo">
  <a href="">Lorem</a>
  <a href="">Ipsum</a>
  <a href="">Contact</a>
</div>

Quoting from https://developer.mozilla.org/en-US/docs/Web/CSS/place-items:

The CSS place-items shorthand property allows you to align items along both the block and inline directions at once (i.e. the align-items and justify-items properties) in a relevant layout system such as Grid or Flexbox. If the second value is not set, the first value is also used for it.

Vertically center inline-blocks elements in header

3 Answers3