我真的是网页设计的新手。我正在为我学校的学生建立一个网站。
但是，在我的 mac 上，内容显示在中心。但在 Windows 上，内容在右边比左边有更多空间。
.inner
{
text-align: center;
display: inline-block;
position: absolute;
top: 30%;
left: 25%;
margin: 0 auto;
} <div class="inner">
<h1>What are you looking for?</h1>
<br>
<button class="button button4"><font size="6">Developer</font></button>
<button class="button button4"><font size="6">Entrepreneur<font size="6"></button>
<button class="button button4"><font size="6">Other<font size="6"></button>
</div>最佳答案
检查这段代码它可能对你有帮助
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
.inner-div
{
text-align: center;
margin: 0 auto;
background-color: #fafafa;
border: 1px solid #ccc;
width: 40%;
min-height: 200px;
}
.button
{
background-color: #f2f2f2;
border: 1px solid #ccc;
padding: 10px 20px;
text-align: center;
font-size: 14px;
}
.button:hover
{
background-color: #f9f9f9;
border: 1px solid #aaa;
padding: 10px 20px;
text-align: center;
font-size: 14px;
cursor:pointer;
}
@media screen and (max-width: 1024px)
{
.inner-div
{
width: 60%;
}
}
@media screen and (max-width: 678px)
{
.inner-div
{
width: 90%;
}
.button
{
width: 100%;
}
}
</style>
</head>
<body>
<div class="inner-div">
<h1>
What are you looking for?</h1>
<br>
<button class="button">
Developer
</button>
<button class="button">
Entrepreneur
</button>
<button class="button">
Other
</button>
</div>
</body>
</html>关于html - 不同屏幕尺寸的网站显示不同，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46499150/