Question

有谁可以告诉我为什么我的中心标签不起作用？ css和html都包含在相同的代码中。首先，我试图通过使用position作为绝对来解决问题，但我想要一个响应式网页，并希望将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>

Answer 1

正如@hungerstar的评论所述：

<center>已被弃用，可能会随时停止工作。

如果您想知道它被弃用的原因，可以查看this answer。

您还可以在W3中看到this reference过时的标签。

除了问题之外，在这种情况下，您可以使用<div>和flexbox来轻松实现您想要的目标，您可以这样做：

＆＃13;

.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;
}

＆＃13;

<!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>

＆＃13;

你也可以利用#photo元素中的flexbox来消除flex-items中的浮点数和额外的<div>元素。

＆＃13;

#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;
}

＆＃13;

<!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>

＆＃13;

Answer 2

没有为<div id="photo">定义宽度，因此它会自动扩展到100％宽度，并且没有任何内容可以占据整页宽度。

您可以为它添加背景颜色，因此更明显。

除了使用中心之外，最好使用margin: auto并为div元素定义宽度。

看看这个小提琴：{{3}}

Answer 3

HTML5中不支持中心标记：

https://jsfiddle.net/jvtxf2em/

任何人都可以告诉我为什么我<center> </center>标签不能使用以下代码？

3 个答案: