以特定 DIV 为中心 - 尝试了很多 - 不断失败答案

【问题标题】：Centering a specific DIV - Have Tried a LOT - Failing Constantly以特定 DIV 为中心 - 尝试了很多 - 不断失败
【发布时间】：2011-01-05 18:06:31
【问题描述】：

大家晚上好，

这是我第一次访问这个网站，所以如果我这样做真的很糟糕，我深表歉意。

首先，我有一个专为 wordpress 使用而设计的网站，我遇到的问题是我希望顶部的水平导航以某种方式显示，但如果我保留它现在的样子它似乎下降到第二排......这让我很难过。

所以我决定将单个按钮变小，然后将它们居中，这样即使查看器没有我正在使用的字体（即 IMPACT），它也会调整它们是如何居中的，而不是下拉。

我一直试图找到一种方法来做到这一点，但我一再失败。我在 firefox 中使用“firebug”来测试代码更改，但我找不到一种方法来完成这项工作。

网页为http://www.crapcast.com，代码位于页面顶部，位于徽标下方。我将包括当前的 CSS，它的格式是为了满足页面的当前使用情况（但同样，在一些旧浏览器和手机浏览器上往往会显示双行）。

#navigation {
float:left;
position:relative;
z-index:9999;
}
#navigation ul {
font-family:Impact,Charcoal,Times New Roman;
font-size:22px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
#navigation li {
float:left;
position:relative;
}
#navigation li a {
float:left;
letter-spacing:2.45px;
padding:15px;
text-decoration:none;
}
#navigation .main_category {
background-position:center top;
background-repeat:no-repeat;
}
#navigation .active {
background-position:0 10px;
background-repeat:no-repeat;
}
#navigation li.current-menu-item, #navigation li.current-menu-ancestor, #navigation li.current-post-parent, #navigation li.current-menu-parent {
background-position:0 10px;
background-repeat:no-repeat;
}
#navigation ul li ul {
display:none;
left:0;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
position:absolute;
top:50px;
width:230px;
}
#navigation ul li ul li a {
padding:15px 0 15px 36px;
width:194px;
}
#navigation li a.odd {
background-position:18px 23px;
background-repeat:no-repeat;
text-transform:uppercase;
}
#navigation li a.even {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#212121 url(../images/navigation_dot.gif) no-repeat scroll 18px 23px;
}
#navigation li a.odd:hover, #navigation li a.even:hover {
background-position:18px 23px;
background-repeat:no-repeat;

【问题讨论】：

标签： css html centering

【解决方案1】：

我认为您的问题与您的字体有关：

#navigation ul {
  font-family:Impact,Charcoal,Times New Roman;
  ...
}
...
...
#navigation li a {
  ...
  letter-spacing:2.45px;
  ...
}

您正在使用字体的宽度来设置菜单中项目的宽度。因此，当系统中没有 Impact 字体时，项目的宽度会增加很多。 Impact 字体的每个字符的宽度都比你放在那里的其他字符要窄。

如果您尝试使用 等效宽度 字体，我相信您会解决问题。

在 iPhone 上，我猜是 Android 上，你找不到 Impact 字体。

尝试 Helvetica、Arial 而不是 Impact，并将您的 letter-spacing 更改为 2.0px 或类似的东西那个。

【讨论】：

【解决方案2】：

我在任何浏览器中都没有看到“两行”问题，即使是 IE6。

如果想确保您的访问者能够查看您正在使用的确切字体.. 可能是 Impact 或任何类型的花哨字体。尝试使用http://www.fontsquirrel.com/fontface/generator。

只需上传您想要的字体，下载工具包并按照非常简单的说明进行操作 (^_^)

【讨论】：