How can I vertically align a Parent and its child in a hortizontally aligned ul?

Question

Here is an image: What I am trying to align vertically

I am trying to align these items with the icon on top of the text Here is my code:

* {
    margin: 0;
}

body {
    font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
    padding: 0px;
    margin: 0px;
}

a {
    text-decoration: none;
    margin: 5px;
    color: black;
}

ul {
    list-style: none;
    padding: 0px;
}

.icon {
    font-size: 36px;
    vertical-align: middle;
}

.navbar {
    z-index: 100;
    background-color: #f1f1f1;
    border-bottom: 1px solid black;
    text-align: center;
    padding: 5px;
    margin-bottom: 25px;
}

.navbar ul li .leftNav {
    display: inline;
    float: left;
}

.navbar ul li .middleNav {
    display: inline;
    float: center;
    position: relative;
}

.navbar ul li .rightNav {
    display: inline;
    float: right;
    position: relative;
}

and my html:

extends layout

block content
  .navbar
    ul 
      li 
        a(class="leftNav" href="#") Movies
          i(class="fas fa-film icon")
      li 
        a(class="leftNav" href="#") Series
          i(class="fas fa-film icon")
      li
        h1(class="middleNav")= title
  p Welcome to #{title}

There is probably a simple solution I am missing here but any help is appreciated since I have been looking around for 30 minutes and still haven't found any solution to this on the web.

score 1 · Accepted Answer · answered Jul 22 '21 at 12:05

You can achieve this by updating the following HTML

.navbar
  img(src='https://i.stack.imgur.com/uJjd5.png', alt='', style='display: block;')
  ul(style='display: block;')
    li
      a.leftNav(href='#')
        | Movies
        i.fas.fa-film.icon
    li
      a.leftNav(href='#')
        | Series
        i.fas.fa-film.icon
    li
      h1.middleNav
p Welcome to

and update your CSS:

.navbar {
    z-index: 100;
    background-color: #f1f1f1;
    border-bottom: 1px solid black;
    text-align: center;
    padding: 5px;
    margin-bottom: 25px;
    display: flex;
    flex-direction: column;
}

score 0 · Answer 2 · answered Jul 22 '21 at 12:04

0

You can try

i {
    vertical-align: middle;
}

but it is usually hacky to get it perfect, I usually use flexbox for alignment

.navbar ul li .leftNav {
    display: flex;
    align-items: center;
}

answered Jul 22 '21 at 12:04

E P

389
4
16

score 0 · Answer 3 · answered Jul 22 '21 at 12:13

you can do display:flex and align-items: center to the li element to get the desired result. You can check out the code below

a {
    text-decoration: none;
    margin: 5px;
    color: black;
}

ul {
    list-style: none;
    padding: 0px;
}
li a {
  display: flex;
  align-items: center;
}

.icon {
  margin-left: 8px;
  font-size: 36px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet" />
<ul>
  <li>
    <a href="" class="leftNav">
      <span>Movies</span>
      <i class="fas fa-film icon"></i>
    </a>
  </li>
  <li>
    <a href="" class="leftNav">
      <span>Series</span>
      <i class="fas fa-film icon"></i>
    </a>
  </li>
</ul>

How can I vertically align a Parent and its child in a hortizontally aligned ul?

3 Answers3