谁能告诉我为什么中心标签不起作用？ css 和 html 都包含在同一代码中。 首先，我尝试通过使用绝对位置来解决问题，但我想要一个响应式网页并希望将 div(照片)保留在页面的中心。
#photo-left {
float: left;
height: 180px;
width: 140px;
border: red dashed 2px;
}
#photo-right {
float: left;
height: 180px;
width: 140px;
border: red dashed 2px;
}
#photo {
/*position: relative;
top:150px;
left: 35%;*/
height: 180px;
margin: auto;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome</title>
</head>
<body>
<header style="position: relative;top: 100px;">
<nav>
<ul>
<li><a href="index.html">Home</a></li>
</ul>
</nav>
</header>
<center>
<div id="photo">
<div id="photo-left"></div>
<div id="photo-right"></div>
</div>
</center>
</body>
</html>最佳答案
正如@hungerstar 在评论中提到的:
<center>is deprecated and could stop working at anytime.
如果你想知道为什么它被弃用了，你可以看看 this answer .
您还可以看到this reference来自 W3 的过时标签。
抛开问题，在这种情况下，您可以改用 <div>和 flexbox要轻松实现您想要的，您可以这样做:
.album {
display: flex;
justify-content: center;
}
#photo-left {
float: left;
height: 180px;
width: 140px;
border: red dashed 2px;
}
#photo-right {
float: left;
height: 180px;
width: 140px;
border: red dashed 2px;
}
#photo {
height: 180px;
margin: auto;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome</title>
</head>
<body>
<header style="position: relative;top: 100px;">
<nav>
<ul>
<li><a href="index.html">Home</a></li>
</ul>
</nav>
</header>
<div class="album">
<div id="photo">
<div id="photo-left"></div>
<div id="photo-right"></div>
</div>
</div>
</body>
</html>您还可以在 #photo 中利用 flexbox元素，去掉 flex 元素中的 float 和额外的 <div>元素。
#photo-left {
height: 180px;
width: 140px;
border: red dashed 2px;
}
#photo-right {
height: 180px;
width: 140px;
border: red dashed 2px;
}
#photo {
height: 180px;
display: flex;
justify-content: center;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome</title>
</head>
<body>
<header style="position: relative;top: 100px;">
<nav>
<ul>
<li><a href="index.html">Home</a></li>
</ul>
</nav>
</header>
<div id="photo">
<div id="photo-left"></div>
<div id="photo-right"></div>
</div>
</body>
</html>关于html - 谁能告诉我为什么我的 <centre></centre> 标签不能使用以下代码？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44661286/