私は、左、右、中央の3つの要素を整列しようとしています。中央の要素=動的な幅、要素の幅=ブラウザの幅を含む

Question

ここに私がやろうとしているのは、<h1>要素、<time>要素、<div>のすべてが<header>のブラウザウィンドウの全幅。 <h1>要素は、左側にある必要があります。時間とともに幅を変更する<time>要素は、中央に配置する必要があり、<div>は右側にある必要があります。

私はしばらくの間これを試してみましたが、幸運はありませんでした。おそらくそれはいくつかのJavaScriptが必要ですか？私はまた、絶対的な位置付けを使って考えることができるようにする必要があります。それらをすべて垂直方向に中央に整列させる必要があり、それらはすべて異なるフォントサイズです。

相続人は、これまでHTML：

<header> 
    <h1>blahblah.com</h1> 
    <time>THE TIME</time> 
    <div id="controls"> 
     DISPLAY CONTROLS 
    </div> 
</header> 

とCSS：

* { 
    margin: 0px; 
    padding: 0px; 
} 
header { 
    background: black; 
    color: white; 
    width: 100%; 
    font-family: wendy; 
} 
header h1 { 
    display: inline-block; 
    font-size: 40px; 
    margin-left: 10px; 
} 
header time { 
    font-size: 30px; 
} 
header #controls { 
    display: inline-block; 
} 
#controls p { 
    display: inline-block; 
    font-size: 20px; 
} 

はどうもありがとうございました！

Answer 1

Timeはインライン要素なので、ヘッダの場合はtext-align: centerで十分です。さらに不要なinline-blockスタイルを取り除く。

そしてベース整列スタイルシートはthis fiddle exampleに縮小：

header { 
    width: 100%; 
    overflow: hidden; 
    text-align: center; 
} 
header h1 { 
    float: left; 
} 
header #controls { 
    float: right;  
} 

オーバーフローが最も高い方、浮上要素のものにヘッダの高さを延長保証するために添加されます。