在 Css 中将块元素居中，彼此相邻放置，没有任何巨大的空间答案

【问题标题】：Centering a block element in Css, with laying next to each other without any huge space在 Css 中将块元素居中，彼此相邻放置，没有任何巨大的空间
【发布时间】：2012-10-03 02:53:53
【问题描述】：

我想将我的块菜单放在中间，但我也希望它彼此相邻放置，没有任何巨大的空间。我试图浮动整个东西并将左边距和右边距设置为自动。但是在网上搜索后，我发现无法将浮动的东西居中。

然后我尝试将块设置为 inline-block 并带走浮动元素。并再次将边距设置为自动。现在这似乎也不起作用。我在某个地方读到您可以将 text-align 设置为居中，这是将我的文本在块中居中，但块本身并没有进入中间。

此时我在 css 中的整个菜单代码：

a.menyStil
{
display: inline-block; 
width:150px; 
height:25px;
margin-right:auto;
margin-left:auto;
background:#dca; border:1px solid #000;
text-align:center; 
text-decoration:none; font-family:verdana, arial, sans-serif; font-size:12px; color:#000;
line-height:25px; 
overflow:hidden;
}

a.menyStil:hover {background:#764;}
a.menyStil:active {background:#c00;}

及相关的html代码：

<p> <a class="menyStil" href="Hjem.html"> Hjem</a>
<a class="menyStil" href="Kontakt.html"> Kontakt oss</a>
<a class="menyStil" href="om_oss.html"> om osst</a>
<a class="menyStil" href="testing.html"> Testing</a></p>

非常感谢您的帮助:)

【问题讨论】：

标签： html css menu block center

【解决方案1】：

将此添加到您的 css 代码中

p{
 width: 650px;
margin: auto;
}

演示：fiddle

您应该在p 中添加自动边距。因为它包含a。所以它来到了中心。
希望对您有所帮助。

【讨论】：

如果您知道所有选项卡的总宽度，这将非常有用，否则它们将不会完全居中于中间。 ;-)

【解决方案2】：

p {
    text-align: center;
}

http://jsfiddle.net/B8gFC/

【讨论】：