0

你如何在没有包装的情况下将其居中？

我可以用包装器来实现这一点.. 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

4

5 回答 5

2

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

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只需创建一个可重用的类，为它们添加相同数量的填充。

于 2013-09-26T04:56:51.550 回答
1

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

margin: 0 auto;

但是，我不确定您的包装类是否这样做

text-align: center;
于 2013-09-26T04:49:00.007 回答
1

这是小提琴链接。完成以下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/

于 2013-09-26T04:57:10.230 回答
1

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

演示

<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>
于 2013-09-26T05:02:28.020 回答
1

您的带有.header包装器的代码正在工作，因为它还将浮动元素包装在其中。一旦包装器被移除，那么浮动元素就不能使用诸如magin: 0 autoor之类的居中方法来驯服text-align: center。并且h1元素的浮动属性隐藏了它的默认边距和填充。因此，请执行以下步骤：

  • 从这些子元素中删除float属性。
  • 给display: inline-block那些子元素。
  • 给父元素text-align: center。（在这里您不能使用 margin:0 auto ，因为它旨在用于某些元素.header，例如您已删除的包装器、元素。）
  • 两个子元素排成一行，现在位于中心。但是为了让它们之间有一些差距，margin请在两个子元素的左右使用 css 属性以百分比表示。

工作小提琴

于 2013-09-26T05:26:14.790 回答