gpt4 book ai didi

html - 调整页面大小时标题正在移动

转载 作者:太空宇宙 更新时间:2023-11-04 12:45:04 27 4
gpt4 key购买 nike

我正在制作一个采用响应式设计的网站,这样它在不同设备上看起来仍然不错并且可以很好地调整大小。

一切正常,除了 h1 文本。我有一个固定宽度为 800px 的容器,它在适当的屏幕尺寸下变为 100% 的宽度。标题文本居中,但是,当屏幕尺寸发生变化并且容器变为 100% 宽度时,标题现在偏离中心,稍微向右移动。

这是我的 HTML:

<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<title>Home</title>
</head>
<body>
<div id="container">
<h1>My Website!</h1>
</div>
</body>
</html>

还有我的 CSS:

* {
font-family: Helvetica Neue;
}

body {
background-color: gray;
margin: 0;
}

h1 {
text-align: center;
}

#container {
width: 800px;
margin: 0 auto;
padding: 20px;
background-color: white;
}

/* Resizability (Responsive Web Design) */

@media screen and (max-width: 840px) {

#container {
width: 100%;
}

}

出了什么问题?

最佳答案

你可以使用这样的东西 Fiddle .

添加 max-width: 100%width: auto 属性,例如:

CSS

@media screen and (max-width: 840px) {

#container {
max-width: 100%;
width: auto;
border: 1px solid red; /*only for demonstration */
}

}

关于html - 调整页面大小时标题正在移动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26574183/

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