时间戳

首页 > 解决方案 > 需要帮助将图像集中在我的标题列表中吗？

html - 需要帮助将图像集中在我的标题列表中吗？

问题描述

我只是想知道如果有意义的话，我将如何将 ul（无序列表）的所有内容水平对齐到中心。就像不是让他们的底部对齐，而是让他们的中心对齐。

这是目前的照片：https ://postimg.cc/S2YrpR24

这是我希望它看起来的样子（在 photoshop 中编辑）：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;
}

标签： htmlcssalignment

解决方案

欢迎来到 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
}

推荐阅读