0

私は次のフィドルを持っています：http： //jsfiddle.net/BFSH4/

ご覧のとおり、2つの問題があります。

  1. h1とh2は垂直方向に整列していません。
  2. ナビゲーションとコンテンツは水平方向に整列していません。

1.については、すでにマージンとパディングを試しました。失敗...

2つ目も、フローティングやインラインブロックの一般的な使用方法が機能しないほど簡単ではありません...

私は何が間違っているのですか？

私はついにヘッダーを浮かせることができました。問題は、hgroupがブロック要素ではないことでした。しかし、結局はうまくいきましたが、企業名やスローガンには実像を使うほうがいいと思います。

これで、水平方向の配置に関する問題のみが失敗します。

理由はわかりません：http： //jsfiddle.net/BFSH4/2/

私はやりたいことができます。彼らが並んでいられない方法はありません！

4

1 に答える 1

0

最初の問題の解決策（ここにあります）：

HTML

<div class="header">
    <span></span><img src="images/prototype.png" /><hgroup><h1>Prototype</h1><h2>SideBySide</h2></hgroup>
</div>

CSS

.header {
    height: 160px;
    border: 1px solid #8a2be2;
    /* text-align: center; */
}

.header span {
    height: 100%;
    vertical-align: middle;
    display: inline-block;
}

.header img {
    display: inline-block;
    height: 160px;
    float: left; /* added, so the image will appear left to the text correctly */
}

.header hgroup {
    margin: 0;        
    vertical-align: middle;
    display: inline-block;
}

このソリューションはに依存しますdisplay: inline-block

2番目の問題の解決策：

.nav {
    width: 229px;
    display: block;
    margin: 0 auto;
}

ライブデモ： http： //jsfiddle.net/BFSH4/4/

于 2012-06-13T16:07:33.150 に答える