Question

我正在尝试将span id“diet”和h1标签的内容定位到网页的中心。我目前还不确定在重新定位时我到底出了什么问题。

我尝试删除float属性并将定位更改为绝对值，输出不正确。

感谢我对我工作的一些反馈。

Answer 1

添加text-align：center;到样式表中的内容

  #content {
font-family: monospace;
color: #46C;
-webkit-margin-before: 0.67em;
-webkit-margin-after: 0.67em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: bold;
padding: 40px 0;
float: left;
width: 100%;
   text-align:center;
 }

这是小提琴 http://jsfiddle.net/3caj2/1/

Answer 2

只需从position:relative;移除float:left;，#welcome，然后只使用margin:auto;

此处：http://jsfiddle.net/9E4KL/

#welcome {
    width: 500px;
    text-shadow: 0 3px 0px #FFF;
    margin:auto;
    margin-top: 30px;
}

Answer 3

您需要为徽标div和h1标记（width: 100%）定义宽度，并且（如Travis所述）将内容与text-align: center对齐。

饮食标签的CSS规则如下所示：

#logo {
  float: left;
  font-size: 71px;
  letter-spacing: 1px;
  font-weight: 200;
  text-transform: uppercase;
  font-family: "MARI&DAVID BOLD";
  text-decoration: none;
  margin: 7px 10px 10px 0;
  width: 100%;
  text-align: center;
}

将内容定位到中心

3 个答案: