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

ラッパーを使用したコードは.header、浮動要素も内部にラップしていたため、機能していました。magin: 0 autoラッパーが削除されると、や などのセンタリング方法を使用して浮動要素を飼いならすことはできませんtext-align: center。また、要素の浮動プロパティはh1、デフォルトのマージンとパディングを隠していました。したがって、次の手順を実行します。

  • floatこれらの子要素からプロパティを削除します。
  • display: inline-blockそれらの子要素に与えます。
  • 親要素を与えるtext-align: center。(ここでは、 margin:0 auto は使用できません.header。これは、削除したラッパー、要素などの要素で使用することを意図しているためです。)
  • 2 つの子要素が 1 行にくっついており、現在は中央にあります。しかし、それらの間にいくらかのギャップを与えるには、margincss プロパティを両方の子要素の左右にパーセンテージで使用します。

働くフィドル

于 2013-09-26T05:26:14.790 に答える