Question

这是一个链接： http://www.cultsectsclothing.com/shop

有人可以帮帮我吗？我无法弄清楚为什么标题不会居中。相反，它一直笨拙到右边。我觉得这很简单，但我甚至都不知道...

我已经尝试重做css和html级联布局中的标题。这与我在所有其他页面上执行标题的方式相同。我只需要将愚蠢的标题放在中心位置，并且由于一些奇怪的原因它不是。

我检查了我的标签并确保它们与我的标签相匹配。帮助??

Answer 1

为#header提供类似这样的CSS，它毫无疑问！

#header {
font-size: 60px;
font-style: oblique;
font-weight: bold;
color: #000;
position: fixed;
top: 30px;
width: 100%;
min-height: 30px;
display: inline-block;
text-align: center;
margin: 0 auto;
}

Answer 2

Demo JsFiddle

在margin: 0 auto;中添加#header。这将解决您的问题..

<强> HTML

<div id="header"><a href="/">CULT SECTS</a></div>

<强> CSS

#header { 
   font-size: 60px;
   font-style:oblique;
   font-weight:bold;
   color: #000;  
   text-align: center;
   margin 0 auto;
   width: 100%;
   min-height: 30px;
   display: inline-block;
}

Answer 3

您可以将它用于标题：

#header { 
  width:980px;
  height:130px;
  margin:0 auto;
}

Answer 4

而不是

width: 1000px;

放

width: 100%;

#header上的#header CSS样式。它看起来像这样：http://d.pr/i/2OKD 并且固定将仍然存在，因此，您的“徽标”将不会滚动（如菜单）。

Answer 5

试试这个

#header {
font-size: 60px;
font-style: oblique;
font-weight: bold;
color: #000;
position: fixed;
top: 30px;
width: 100%;
min-height: 30px;
display: inline-block;
text-align: center;
margin: 0 auto;
}

Answer 6

在你的代码的上下文中，你只需要在你的#header规则中添加两个属性，它们是左边：0和宽度：100％（删除你的1000px因为我假设你只是希望标题居中并且不关心确切的宽度）

请参阅下面代码块中的最后2个属性：

#header {
font-size: 60px;
font-style: oblique;
font-weight: bold;
color: #000;
position: fixed;
top: 30px;
min-height: 30px;
display: inline-block;
text-align: center;
left: 0;
width: 100%;

}

http://jsfiddle.net/uberrobert/F4TgR/

这会让你的标题从右边回来，因为我在Firefox中看到了这种行为：）

为什么我的标题不在中心？

6 个答案: