Question

出于某种原因，我无法将。logo类置于CSS中心。

我试过margin:0px auto。

我忽略了什么吗？

感谢。

CSS：

.full {
    width: 100%;
    height: auto;
    float: left;
    clear: none;
    position: relative;
    display: block;
}

.logo {
    width: 230px;
    height: 117px;
    float: left;
    clear: none;
    position: relative;
    display: block;
    margin: 10px auto 15px auto;
    padding: 0;
}

HTML：

<div class="full"> 

<figure class="logo"></figure> 
<figure class="x-button"></figure>

</div>

Answer 1

删除以下内容：

.logo {
    float: left;
}

您无法通过margin:0px auto;直接居中浮动元素。如果您想要一个元素浮动和居中，您可以始终将边距应用于父级，而子级本身保持浮动。 An example of this can be seen here.

请注意，如果只是文字，那么您可以随时使用：text-align:center;

Answer 2

删除float: left;的{{1}}。 .logo使其与左侧对齐。

点击here获取演示小提琴。

Answer 3

至少在这种情况下，您无法水平居中浮动元素。

这是一个最小的例子：http://jsfiddle.net/tJ5N3/

如上所述，您可以移除浮动。

此外，作为一种变通方法，您可以使用水平居中的div包裹元素。在这种情况下，如果有必要，你可以保持浮动。

中心DIV水平带边距

3 个答案: