Нужна помощь централизации изображения в списке в моем заголовке?

Question

Мне было просто интересно, как бы я go по поводу горизонтального выравнивания всего содержимого ul (неупорядоченного списка) по центру, если это имеет смысл. Как вместо того, чтобы выравнивать их днища, выравнивая их центры.

Вот фотография того, как это выглядит в настоящее время: https://postimg.cc/S2YrpR24

Вот то, что я хотел бы, чтобы это выглядело (Отредактировано в фотошопе): https://postimg.cc/N9YQT96G

Мой HTML для моего заголовка выглядит так:

<header>
    <nav>
        <ul>
            <li><a>Contact Us</a></li>
            <li><a>Sign Up</a></li>
            <li><img id="logo" src="img/schule logo light.png" alt="mainlogo"></li>
            <li><a>Our Resources</a></li>
            <li><a>The Teachers</a></li>
        </ul>
    </nav>
</header>

и мой css выглядит так:

header{
    background-color: rgba(0,0,0,.5);
    backdrop-filter: blur(10px);
    color: #000000;
    padding-top: 10px;
    min-height: 110px;
    position: fixed;
    width: 100%;
}

header h1{
    font-weight: 600;
    margin: 30px 0px 0px 0px;
    color: #000000;
}

header a{
    text-decoration: none;
    font-size: 20px;
    color: #FFFFFF;
}

header img{
    padding-top: 0px;
    width: 40px;
}

header ul{
    text-align: center;
    padding: 15px;
    margin: 0px;
}

header li{
    display: inline-block;
    list-style: none;
    padding: 0px 30px 0px 30px;
}

Answer 1

Добро пожаловать на SO!

Это выглядит как очень хорошее применение для flexbox , достойного демонстрационного сайта :

HEADER UL {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row nowrap;
  flex-flow: row nowrap;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: center;
  align-items: center;
  -webkit-align-content: stretch;
  align-content: stretch
}

Answer 2

Вот рабочий пример использования гибких и вертикально выровненных элементов:

<header>
    <nav>
        <ul>
            <li><a>Contact Us</a></li>
            <li><a>Sign Up</a></li>
            <li><img src="https://via.placeholder.com/200x100" alt="test image"></li>
            <li><a>Our Resources</a></li>
            <li><a>The Teachers</a></li>
        </ul>
    </nav>
</header>

<style>
    ul {
        display: flex;
        justify-content: space-between;
        width: 100%;
        margin: 0;
        padding: 0;
        align-items: center;
    }
    li {
        display: block;
        flex: 0 1 auto;
        list-style-type: none;
    }
</style>

Answer 3

Возможно изменить

header img {
    padding-top: 0px;
}

на

header img {
    padding-top: 30px;
}

?

Трудно сказать с этими фрагментами. Или опубликовать URL?