gpt4 book ai didi

html - 在页面中心对齐无序列表[新问题]

转载 作者:行者123 更新时间:2023-11-28 09:18:32 25 4
gpt4 key购买 nike

所以我的问题是我希望我的文本显示在页面的死 Angular 。我一直在尝试手动对齐它,但这似乎是一种糟糕的做法。我想要它,这样即使网页被调整为更小或者用户使用的是更小的屏幕,无序列表也会显示在屏幕的死 Angular 。到目前为止,我尝试过的内容不会随背景移动并且对齐得非常差。HTML:

<html>
<link rel="stylesheet" type="text/css" href="../Web_v2/css/Style.css">
<head><title>Company</title></head>
<body>
<nav>
<ul>
<li>about us</li>
<li>Who we are</li>
<li>Contact us</li>


</ul>

</nav>

</body>

<div id="bg">
<img src="../Web_v2/Assets/bg.jpg">
</div>
</html>

CSS:

    #bg{
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
#bg img{
z-index: -1;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
nav ul{
list-style: none;
}
nav{
z-index: 1;
position: relative;
text-align: center;
margin-top: 400px;
margin-left: 600px;
font-size: 40px;
color: white;
font-weight: 20;

}

编辑:感谢所有有用的答案,但我仍然遇到问题。

问题一:调整页面大小时,文字上下移动。我想让它坐在山顶附近:http://gyazo.com/8c7dc29c17dab86186cf4bfde4eb1a18- 它应该是这样的:http://gyazo.com/644b3c072e7befffaf08d412a894bbb3

最佳答案

这是使无序列表集中在整个页面中的非常简单的代码。

按照以下方式为您的导航标签添加样式:

nav{
float:left;
width:100%;
text-align:center;
display:table-cell;
}

并为您的 ul 标签赋予样式,如下所示:

ul{
float:none;
margin:35% auto auto;
width:200px;
list-style:none;
text-align:center;
}

关于html - 在页面中心对齐无序列表[新问题],我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26199380/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com