html - Howto CSS: 2 つの要素が両方とも垂直方向に中央に配置され、反対側に浮いている (例)

Question

簡単に言うと、2 つの要素が両側に浮かび、垂直方向に中央に配置されたヘッダーが必要です。

非浮動要素でこれを行うことから始めて、なんとかこの例を作成しました。

float:leftしかし、またはを追加するとfloat:right、垂直方向のセンタリングが失われます (もうフローの一部ではないため、その理由は理解できます)。

これを達成するための最良の方法は何だろうか。CSS の完全な再設計は喜んで受け入れられます。

前もって感謝します！

Answer 1

特にインライン要素を扱っていない場合は、垂直方向のセンタリングが苦痛になる可能性があります。この場合、 を利用することをお勧めしdisplay:table-cellます。

HTML

       <div id="wrapper">
            <div class="cell">
                <div class="content">
                    Content Goes here
                </div>
            </div>
            <div class="cell">
                <div class="content2">
                    <div class="redbox">
                    </div>
                </div>
            </div>
        </div>

CSS

            #wrapper {
                color: white;
                display: table;
                border: 1px solid darkblue;
                background: blue;
                width: 100%;
            }

            .cell {
                display: table-cell;
                vertical-align: middle;
                height: 200px;
            }

            .content {
                float: left;
            }

            .content2{
                float: right;
            }

            .redbox {
                border: 2px solid darkred;
                background: red;
                height: 75px;
                width: 75px;
            }

例: http://jsfiddle.net/YBAfF/

Answer 2

親divに追加text-align:rightすると、子要素が右側に配置されます。ここで float:left を追加します#text

#parent {
  border: 1px solid black;
  display: block;
  line-height: 400px;
  height: 400px; text-align:right

}

#text {
  display: inline-block;
  border: 1px dashed black;
  height: 100%; text-align:left; float:left
}

#logo {
  border: 1px dashed black;
  height: 90%;
  line-height: 90%;
  vertical-align: middle;
  display: inline-block;
}

#logo img {
  border: 1px dashed red;
  height: 100%;
}
​

デモ

Answer 3

中央に配置する要素の周りにラッパーを追加し、ラッパー内にフロートさせる必要があります。そんな感じ：

HTML

<div class="center">
  <p class="left">Some text goes here</p>
  <img src="/path/toimage" alt="My image" class="right">
</div>

CSS

.center {
  margin:0 auto;
  width: 400px;
}
.right {
  float: right;
}
.right {
  float: left;
}

もちろん、これは非常に単純な例です。必要に応じて値とCSSを変更できます。

Answer 4

以下は、 jsfiddleのサンプルと同じコードです。要素の高さを設定すると、同じ行の高さをネストされた要素に設定でき、要素はその高さに拡張されます。コンテンツを垂直方向に中央揃えにします。

HTML

<div id="wrapper">
<div id="left">left</div>
<div id="right">right</div>
</div>​

CSS

#wrapper{
    margin:0 auto;
    width 960px;
    background: #eee;
    height:50px;
}
#left{
    float:left;
    background:#ccc;
    line-height:50px;
}
#right{
    float:right;
    background:#ddd;
    line-height:50px;
}

</p>