时间戳

首页 > 解决方案 > 如何使无序列表居中

html - 如何使无序列表居中

问题描述

我现在已经尝试了多次，但我不知道如何将我的无序列表放在我的 div 中间。

1：描述它现在的样子 在此处输入图像描述 2：描述我希望它的样子 在此处输入图像描述

HTML：

 <div id="wrapper">
    <div class="container">
    <img src="flower.jpg"/>
    </div>
    <div class="header">
        <ul>
            <li><a href="default.asp">Home</a></li>
            <li><a href="news.asp">News</a></li>
            <li><a href="contact.asp">Contact</a></li>
            <li><a href="about.asp">About</a></li>
        </ul>
    </div>

CSS：

#wrapper {
    position:absolute;
    background-color: white;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
}

img {
    width: 100%;
    height: 100%; 
    display: block;
}

.header {
    width: 100%;
    height: 100px;
    background-color: green;
}

.header a {
    color: black;
    text-decoration: none;
    margin: 50px;
    padding: 10px;
    font-size: 40px;
    text-align: center;
}

ul {
    list-style-type: none;
    position: absolute;
}

li {
  float: left;
}

我究竟做错了什么？我已经在多个元素中尝试过这些：

感谢您的帮助<3

标签： htmlcss

解决方案

您可以更改 ul 元素的样式以匹配以下代码：

ul {
 list-style-type: none;
 position: absolute;
 left: 0;
 right: 0;
 display: flex;
 justify-content: center;
}

推荐阅读