我正在嘗試對齊左側，右側和中間的三個元素。中心元素=動態寬度，包含元素=瀏覽器的寬度

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;  
} 

溢出被添加，以保證報頭的高度上延伸到該浮動元素，取其最高的。