我正在进入网页设计领域，出于实践目的，我正在尝试创建以真实网站为模型的响应式 HTML 和 CSS 网站，因此我只担心开发，而不是设计。截至目前，我正在重新设计 apple.com。我的问题是，在 apple.com 导航栏中，Apple Logo 始终与网站其他部分的链接相距约一英寸。当您调整浏览器大小时，它会保持大约一英寸的距离。问题是，在我的(未完成的)网站版本上，当您调整浏览器大小时，苹果 Logo 会固定在一个位置。
这是我的代码:
html {
font-size: 100%;
}
body {
padding: 0;
margin: 0;
}
@font-face {
font-family: "San Francisco";
font-weight: 400;
src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-regular-webfont.woff");
}
.font {
font-family: San Francisco;
}
.logo {
position: absolute;
left: 5em;
top: .5em;
}
.center {
display: inline;
text-align: center;
}
.search {
display: block;
position: fixed;
right: 1em;
top: .7em;
}
header {
list-style-type: none;
word-spacing: 40px;
background-color: #323232;
height: 2.8em;
width: 100%;
position: fixed;
opacity: .98;
}
.ul-header {
margin: .8em;
}
.li-header {
display: inline;
}
.a-header {
text-decoration: none;
color: white;
font-family: San Francisco;
font-size: 15px;
}
.iphoneximg {
display: block;
margin-left: auto;
margin-right: auto;
}
.iphone {
text-align: center;
font-size: 3em;
line-height: 0.5em;
}
.sayhello {
text-align: center;
font-size: 1.6em;
line-height: 0;
font-weight: 550;
}
@media(min-width: 1500px) {
.iphoneximg {
width: 50%;
}
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Apple</title>
<link rel="icon" href="Images/Apple.ico">
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<header>
<div class="center">
<img src="Images/Screenshot%20from%202018-03-20%2020-59-01.png" class="logo">
<ul class="ul-header">
<li class="li-header"><a href="#" class="a-header">Mac</a></li>
<li class="li-header"><a href="#" class="a-header">iPad</a></li>
<li class="li-header"><a href="#" class="a-header">iPhone</a></li>
<li class="li-header"><a href="#" class="a-header">Watch</a></li>
<li class="li-header"><a href="#" class="a-header">TV</a></li>
<li class="li-header"><a href="#" class="a-header">Music</a></li>
<li class="li-header"><a href="#" class="a-header">Support</a></li>
<img src="Images/Search.png" class="search">
</ul>
</div>
</header>
<br><br><br><br><br><br><br><br><br>
<section class="iphonex">
<h1 class="font iphone">iPhone X</h1>
<p class="font sayhello">Say hello to the future.</p>
<img src="Images/iphone.png" width="76%" class="iphoneximg">
</section>
<section class="iphonex">
<h1 class="font iphone">iPhone 8</h1>
<p class="font sayhello">A new generation of iPhone.</p>
<img src="Images/generation.jpg" width="76%" class="iphoneximg">
</section>
</body>
</html>有人提出了这个解决方案: How to horizontally center a <div> in another <div>? 问题是我试图弄清楚如何处理图像和文本之间的差异以将它们居中，因此简单地将它们放在 div 中是行不通的。
我试过将文本和图像放在一个 div 中并将其居中、% 值、扰乱显示属性以及其他一些东西，但似乎没有任何效果。
我也是网络开发新手，所以如果还有什么我需要解决的，请随时告诉我。 谢谢， 生活
最佳答案
在 Apple 上运行检查元素 page您会看到他们将他们的图像作为另一个列表元素放置。另一方面，您将它放在列表之外。
这是您的代码，Apple Logo 作为第一个列表元素:
<ul class="ul-header">
<li class="li-header"><a href="#" class="a-header"><img src="apple_logo.png" width='20px'></a></li>
<li class="li-header"><a href="#" class="a-header">Mac</a></li>
<li class="li-header"><a href="#" class="a-header">iPad</a></li>
<li class="li-header"><a href="#" class="a-header">iPhone</a></li>
<li class="li-header"><a href="#" class="a-header">Watch</a></li>
<li class="li-header"><a href="#" class="a-header">TV</a></li>
<li class="li-header"><a href="#" class="a-header">Music</a></li>
<li class="li-header"><a href="#" class="a-header">Support</a></li>
</ul>
编辑
为确保您的苹果 Logo 与列表中的其他元素垂直对齐，请将此添加到您的 CSS:
#app_logo {
margin-top: -10px;
}
.center ul img {
vertical-align: middle;
}
请注意，我为图像添加了一个 ID。此外，您的设置可能略有不同。
关于HTML 和 CSS 将文本和图像居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49442465/