【发布时间】：2018-04-11 20:31:48
【问题描述】：
我试图让页面顶部的菜单居中，而不管它正在查看的屏幕分辨率如何，但是在完成此操作时遇到了一些问题。我一直在尝试根据分辨率调整字体大小甚至图像大小，以便将列表放在顶部，但没有任何运气。
这是我目前拥有的代码：
body {
font-family: Verdana, sans-serif;
font-size: 0.9em;
background: url("Images/lightbackground.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
}
/* unvisited link */
a:link {
color: red;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: hotpink;
}
/* selected link */
a:active {
color: blue;
}
#HeaderMenu {
width: 100%;
height: 145px;
top: 0;
left: 0;
padding: 0px;
color: blue;
text-align: left;
background-color: DarkKhaki;
position: fixed;
}
#HeaderMenu ul {
margin: 0 auto;
width: 60%;
padding-top: 50px;
list-style: none;
}
#HeaderMenu li {
float: left;
}
#HeaderMenu a {
padding: 0 14px;
text-align: center;
display: block;
}
#HeaderMenu ul li a.logo {
background-image: url("Images/red_transparent.png");
background-repeat: no-repeat;
height: 140px;
display: block;
width: 215px;
margin-top: -50px;
padding: 0;
}
footer {
padding: 10px;
color: blue;
text-align: right;
background-color: black;
}
.BodySection {
margin-left: 100px;
margin-right: 100px;
margin-bottom: 10px;
padding: 10px;
color: white;
text-align: center;
background-image: url("Images/wood.jpg");
background-repeat: repeat-y;
background-size: contain;
}
article {
margin: 5px;
padding: 50px;
padding-bottom: 5000px;
}
nav ul {
border: 1px solid #ccc;
border-width: 0px 0;
list-style: none;
margin: 0;
padding: 25px;
text-align: center;
}
nav ul li {
display: inline;
padding: 15px;
}
nav a {
display: inline-block;
padding: 10px;
}
h2 {
text-decoration: underline;
}
.HeaderImageSection {
padding-top: 137px;
padding-left: 100px;
padding-right: 100px;
}
.HeaderImage {
width: 100%;
height: 250px;
background-image: url('Images/image.jpg');
background-size: 100% 100%;
}<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Black Han Sans">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
</script>
<![endif]-->
<body>
<header>
<div id="HeaderMenu" style="font-family: Black Han Sans;">
<ul>
<li><a href="test.html">Test</a></li>
<li><a href="test.html">Test</a></li>
<li><a href="test.html">Test</a></li>
<li>
<a class="logo" href="index.html"></a>
</li>
<li><a href="test.html">Test</a></li>
<li><a href="test.html">Test</a></li>
<li><a href="test.html">Test</a></li>
</ul>
</div>
</header>
<div class="HeaderImageSection">
<div class="HeaderImage"></div>
</div>
<div class="BodySection">
<section>
<h2>Home</h2>
<article>
<h3>COMING SOON....</h3>
</article>
</section>
</div>
</body>任何帮助将不胜感激！
【问题讨论】：
-
尝试将您的 ul 或父 div 更改为宽度，例如 80%。然后左边距：10%。或宽度：60% / 左边距：20%。
-
尝试使用bootstrab getbootstrap.com
-
@user2796515 实际上，这似乎将它集中在我正在使用的笔记本电脑上。但是，当我在较小的设备上（例如移动设备）访问它时，它就离得太远了。肯定越来越近了......谢谢！
-
@WaelAbbas 我会看看它，但我认为这应该可以使用 CSS。
-
可能，但引导程序易于使用、响应迅速且移动优先，从头开始并不容易
标签： html css resize center resolution