Question

如果没有包装，你如何集中这个？

我可以使用包装器实现此目的.. http://jsfiddle.net/PEp7M/

但我希望能够在没有人的情况下做到这一点。

HTML

<div class="header">
        <div class="logo">
                <h1>LogoHere.com</h1>
        </div>
        <div class="nav">
 <a>Something</a>
 <a>Something</a>
 <a>Something</a>
        </div>
</div>

CSS

body {
    margin:0px;
    color:white;
}
.header {
    width: 100%;
    height: 50px;
    background-color:black;
}
h1 {
    display:inline;
}
.logo {
    float:left;
}
.nav {
    float:right;
}

我只是想不使用.header_wrapper，如提及abov的小提琴

Answer 1

如果您希望将标题中的内容保留在居中区域内，则可以向标题元素添加左右填充。

http://jsfiddle.net/PEp7M/4/

HTML

<div class="header">

    <div class="logo">
        <h1>LogoHere.com</h1>
    </div>

    <div class="nav">
        <a>Something</a>
        <a>Something</a>
        <a>Something</a>
    </div>

</div>

CSS

body {
    margin:0px;
    color:white;
}
.header {
    height: 50px;
    background-color:black;
    padding: 0 20%;
}

h1 {
    display:inline;
}
.logo {
    float:left;
}
.nav {
    float:right;
}

我认为包装元素更有意义。如果您担心反复编写相同的代码（例如.header-wrapper，.content-wrapper，.footer-wrapper等），请创建一个可重复使用的类，添加相同数量的代码填补所有人。

Answer 2

没有包装手段，你必须使用

margin: 0 auto;

但是，我不确定你的包装类会不会这样做

text-align: center;

Answer 3

以下是 fiddle link 。完成以下css更正

.header {
    width: 100%;
    height: 50px;
    background-color:black;
    text-align:center;
    }
.logo {
   display:inline;
    }
.nav {
    display:inline;
    }

<强> HTML

<div class="header">

    <div class="logo">
        <h1>LogoHere.com</h1>
    </div>

    <div class="nav">
        <a href="#">Something</a>
        <a href="#">Something</a>
        <a href="#">Something</a>    
    </div>

</div>

通过文字链接http://jsfiddle.net/PEp7M/3/

Answer 4

为什么不在那里使用一张桌子？

<强> DEMO

<div class="header">
    <table align="center">
        <tr>
        <td>
        <div class="logo">
                <h1>LogoHere.com</h1>
        </div>
        </td>
        <td>
        <div class="nav">
               <a>Something</a>
               <a>Something</a>
               <a>Something</a>
        </div>
        </td>
        </tr>
    </table>
</div>

Answer 5

使用.header包装器的代码正在运行，因为它还将浮动元素包装在里面。移除包装器后，无法使用magin: 0 auto或text-align: center等居中方法来调整浮动元素。并且h1元素的浮动属性隐藏了它的默认边距和填充。因此，请执行以下步骤：

从这些子元素中删除float属性。
将display: inline-block提供给这些子元素。
提供父元素text-align: center。（这里你不能使用margin：0 auto，因为它意味着在你已经删除的包装器.header元素之类的元素上使用。）
两个子元素在一行中粘在一起，现在位于中心。但是为了在它们之间留出一些差距，使用margin css属性以百分比形式在子元素的左侧和右侧。

Working Fiddle

没有包装器的中心内容

5 个答案:

HTML

CSS