Center child to the center of its parent

Question

Within my <ul> I ofcourse have a few <li>. These list-items need to be centered vertically and the background has to be full width and height.

The way I tried was by using align-items: center; on the <ul> and I tried align-self: center; on the <li>

Here is my code as it is right now:

.desktop-menu-left {
    display: grid;
    grid-template-columns: auto auto auto auto auto auto;
    height: 100%;
    padding: 0;
    margin: 0;
}

.desktop-menu-left li {
    height: 100%;
}

.desktop-menu-left li a {
    height: 100%;
    padding: 0 10px;
}

<ul class="desktop-menu-left">
  <li class="darkblue"><a href="#">Opleidingen</a></li>
  <li class="orange"><a href="#">Leren bij *</a></li>
  <li class="green"><a href="#">Open huis</a></li>
  <li class="pink"><a href="#">Voor bedrijven</a></li>
  <li class="darkorange"><a href="#">Over *</a></li>
  <li class="lightblue"><a href="#">Niews</a></li>
</ul>

to center where? there is not height, you occupy all the height with your ul — Temani Afif, May 01 '18 at 14:50
@TemaniAfif so I have to give my li a height of 100% and then center the li? — , May 01 '18 at 14:55
100% of what? you need to be clear on how to center? relatively to what ? — Temani Afif, May 01 '18 at 15:01
@TemaniAfif now it gets centered right, but the background-color takes the width of the text and not the full-width/height — , May 01 '18 at 15:13

Takit Isy · Answer 1 · 2018-05-01T19:00:08.550

I played a little with your code.
Is that the kind of result you want to achieve?

/* Added here */
html,
body {
  height: 100%;
  width: 100%;
  position: relative;
}

/* Added colors */
.darkblue {
  background-color: darkblue;
}

.orange {
  background-color: orange;
}

.green {
  background-color: green;
}

.pink {
  background-color: pink;
}

.darkorange {
  background-color: darkorange;
}

.lightblue {
  background-color: lightblue;
}

.desktop-menu-left {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  height: 100%;
  padding: 0;
  margin: 0;
}

.desktop-menu-left li {
  height: 100%;
  list-style-type: none; /* Added */
}

.desktop-menu-left li a {
  padding: 0 10px;
  /* Added */
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

<body>
  <ul class="desktop-menu-left">
    <li class="darkblue"><a href="#">Opleidingen</a></li>
    <li class="orange"><a href="#">Leren bij *</a></li>
    <li class="green"><a href="#">Open huis</a></li>
    <li class="pink"><a href="#">Voor bedrijven</a></li>
    <li class="darkorange"><a href="#">Over *</a></li>
    <li class="lightblue"><a href="#">Niews</a></li>
  </ul>
</body>

I often use this center method as a class to reuse it easily, like this:
.center-y { top: 50%; transform: translateY(-50%); }

Hope it helps.

This is indeed what I need! Nice way to do indeed. I only figured it out as well. I just had to add display:grid and align-items:center to the li — , May 01 '18 at 15:57
I can't give any votes yet. My reputation is to low, but I would give you ;) — , May 01 '18 at 15:58
@Lenap Nice. :) I often use this center method as a class like this: `.center-y { position: absolute; top: 50%; transform: translateY(-50%); }` (Thanks in advance!) — Takit Isy, May 01 '18 at 15:59

score 0 · Answer 2 · answered May 01 '18 at 15:52

0

I've fixed it by setting display: grid; and align-items: center; on the li so I didn't had to set a height to any element.

answered May 01 '18 at 15:52

score 0 · Accepted Answer · answered May 01 '18 at 18:38

In this is case, it's better to use flexbox, because with grid, if you want to add a <li> in HTML, you have to change CSS, too.

html,
body {
  height: 100%;
}

body {
  margin: 0;
}

.desktop-menu-left {
  height: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.desktop-menu-left>li {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.desktop-menu-left>li:nth-child(odd) {
  background: #555;
}

.desktop-menu-left a {
  display: block;
  padding: 0 0.5rem;
}

<ul class="desktop-menu-left">
  <li><a href="#">Opleidingen</a></li>
  <li><a href="#">Leren bij *</a></li>
  <li><a href="#">Open huis</a></li>
  <li><a href="#">Voor bedrijven</a></li>
  <li><a href="#">Over *</a></li>
  <li><a href="#">Niews</a></li>
</ul>

score -3 · Answer 4 · answered May 01 '18 at 14:58

-3

You should give your desktop-menu-left a height and width to have a full width and height background, for instance with height: 100%;.

Then you can also align your list items vertically according to the answer of this question.

answered May 01 '18 at 14:58

DaanR.

37
5

Center child to the center of its parent

4 Answers4