Question

我正在尝试从使用表格的旧html移动到使用CSS设置的html5样式，但我遇到了问题：

codepen Demo

您可以看到，文本与页面边缘对齐，我希望它与标题横幅的边缘对齐。

我无法弄清楚，怎么办？不使用表格。

另外，请注意，.article：nth-child（奇数）CSS选择器，以某种方式将奇数元素对齐到左边，而不是右边......我不明白为什么。

谢谢！

Answer 1

例如

codepen Demo

.article {
     width: 1024px;
}

要使.article居中，您需要设置宽度。你也可以考虑摆脱

<div align="center">

它已在html5中弃用

Answer 2

创建固定宽度网站的最佳方法是添加一个包含div：

只需在当前所有代码周围添加固定宽度的div。

#Wrap{width:1024px;}

<body>
  <div id="Wrap">
    ...
    /* rest of website */
    ...
  </div>
</body>

codepen Demo

清洁示例

<强> HTML

<div id="Wrap">
  <div id="Head"></div>
  <div id="Body"></div>
  <div id="Foot"></div>
</div>

<强> CSS

#Wrap{
  width:1024px; /*Your desired page width*/
  margin:0 auto; /*Center your wrapper on the page*/
}
#Head{
  width:100%; /*Fill the width of the wrapper*/
}
#Body{
  width:100%; /*Fill the width of the wrapper*/
}
#Foot{
  width:100%; /*Fill the width of the wrapper*/
}

Answer 3

您需要编写css来正确设置页面样式：

codepen Demo

div {
  text-align: center;
}

Answer 4

您的内容与标题具有相同的宽度，但是您在标题内部的图像宽度略小于网站的100％，因此您需要为article添加一些像这样的宽度：

.article {
   display: block;
   margin: auto;
   width: 900px;
}

codepen Demo

html5 + CSS3中心页面文字由标题横幅

4 个答案:

清洁示例