How to vertical align inside list with variable height?

Question

I'd like to vertically align my anchor tags inside my list, but there is a problem.

The number of list items are variable to the number of pages my website has. So I set a display flex on the list and flex: 1 on the list items. Every list item contains an anchor tag to redirect to that certain page. It looks weird because they are vertically aligned to the top of the list item (while the list items all have the same height to fill up the 100% height of the thanks to flex).

*,
*:after,
*:before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  font-family: "Helvetica", sans-serif;
  font-size: 2em;
}
div {
  height: 100vh;
  width: 100vw;
}
ul {
  display: -webkit-flex;
  display: flex;
  flex-flow: column nowrap;
  height: 100%;
  list-style: none;
}
li:first-child {
  background-color: #35CE93;
}
li:nth-child(2) {
  background-color: #3A999F;
}
li:last-child {
  background-color: #59ADEB;
}
li {
  display: block;
  -webkit-flex: 1;
  flex: 1;
  flex-direction: row-reverse;
  width: 100%;
  text-align: center;
}
a {
  color: inherit;
  text-decoration: none;
}

<div>
  <ul>
    <li>
      <a href="#">test</a>
    </li>
    <li>
      <a href="#">test</a>
    </li>
    <li>
      <a href="#">test</a>
    </li>
  </ul>
</div>

One solution would be to have another span inside the anchor tag and put the anchor tag to a relative position and the span on absolute. But I can't edit the way the list shows up because I use it on mulitple sites that don't need a span or it will bug.

I could force the spans to go inside the list items with jQuery but I rather not do that.

UPDATE adding this will fix it on computers, but not on iPhone:

a {
  color: inherit;
  text-decoration: none;
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}
a:before {
  display: inline-block;
  vertical-align: middle;
  height: 100%;
  content: '';
}

kukkuz · Accepted Answer · 2016-08-24T15:06:55.490

1

Align them vertically using pseudo elements while using inline-block for the anchor tags in your li as below:

a {
  color: inherit;
  text-decoration: none;
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

a:before {
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    content: '';
}

snippet below:

*,
*:after,
*:before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  font-family: "Helvetica", sans-serif;
  font-size: 2em;
}
div {
  height: 100vh;
  width: 100vw;
}
ul {
  display: -webkit-flex;
  display: flex;
  flex-flow: column nowrap;
  height: 100%;
  list-style: none;
}
li:first-child {
  background-color: #35CE93;
}
li:nth-child(2) {
  background-color: #3A999F;
}
li:last-child {
  background-color: #59ADEB;
}
li {
  display: block;
  -webkit-flex: 1;
  flex: 1;
  flex-direction: row-reverse;
  width: 100%;
  text-align: center;
}
a {
  color: inherit;
  text-decoration: none;
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}
a:before {
  display: inline-block;
  vertical-align: middle;
  height: 100%;
  content: '';
}

<div>
  <ul>
    <li>
      <a href="#">test</a>
    </li>
    <li>
      <a href="#">test</a>
    </li>
    <li>
      <a href="#">test</a>
    </li>
  </ul>
</div>

check this out and let me know your feedback. Thanks!

Flexbox solution:

Also check if changing the li in your code as per below will work in iphone to center the a using flexbox techniques:

li {
  display: flex;
  -webkit-flex: 1;
  flex: 1;
  flex-direction: row-reverse;
  width: 100%;
  text-align: center;
  justify-content: center;
  align-items: center;
}

snippet below:

*,
*:after,
*:before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  font-family: "Helvetica", sans-serif;
  font-size: 2em;
}
div {
  height: 100vh;
  width: 100vw;
}
ul {
  display: -webkit-flex;
  display: flex;
  flex-flow: column nowrap;
  height: 100%;
  list-style: none;
}
li:first-child {
  background-color: #35CE93;
}
li:nth-child(2) {
  background-color: #3A999F;
}
li:last-child {
  background-color: #59ADEB;
}
li {
  display: flex;
  -webkit-flex: 1;
  flex: 1;
  flex-direction: row-reverse;
  width: 100%;
  text-align: center;
  justify-content: center;
  align-items: center;
}
a {
  color: inherit;
  text-decoration: none;
}

<div>
  <ul>
    <li>
      <a href="#">test</a>
    </li>
    <li>
      <a href="#">test</a>
    </li>
    <li>
      <a href="#">test</a>
    </li>
  </ul>
</div>

edited Aug 24 '16 at 15:06

answered Aug 24 '16 at 12:33

kukkuz

41,512
6
59
95

@DerkJanSpeelman let me know if this works for you? Thanks! – kukkuz Aug 24 '16 at 12:49
wow thanks! I only had to add "a { width: 100%; }"! Thanks for the help and quick respond! – Derk Jan Speelman Aug 24 '16 at 13:30
the weird thing is.. On iPhone it doesn't work... – Derk Jan Speelman Aug 24 '16 at 13:50
Try adding a `position: relative` to the `a:before` ? – kukkuz Aug 24 '16 at 14:04
no that didn't make a difference @kukkuz the website is dotvoip.nl by the way (still in dev) – Derk Jan Speelman Aug 24 '16 at 14:24
@DerkJanSpeelman don't have an iphone to test here. Try the alternate solution I have added to the answer above? Thanks! – kukkuz Aug 24 '16 at 15:08
I will check that. Haven't been online today, so I will let you know tomorrow – Derk Jan Speelman Aug 25 '16 at 12:12
@DerkJanSpeelman didn't get your feedback on this. is everything working fine now? – kukkuz Aug 29 '16 at 10:33
Yeah sorry! No I wasn't able to solve it for safari iOs, but I "fixed" it with padding-bottom for the ul. Still looks good – Derk Jan Speelman Aug 29 '16 at 11:59
cool... maybe the `flexbox` solution I have given above may come in handy. :) Please upvote / accept the answer if you found it useful. Thanks! – kukkuz Aug 29 '16 at 12:07
I found it very useful! I'd love to upvote, but I dont have >15 reputation yet :( – Derk Jan Speelman Aug 29 '16 at 12:46
ohh, that's cool... just commented like I do for all the answers I make in SO :) – kukkuz Aug 29 '16 at 12:52
Thank you man! You're really helpful – Derk Jan Speelman Aug 30 '16 at 09:32
Got 15 rep thanks to an upvote, i upvoted your answer ;) – Derk Jan Speelman Aug 30 '16 at 14:30

How to vertical align inside list with variable height?

I'd like to vertically align my anchor tags inside my list, but there is a problem.

1 Answers1