html - 我正在尝试对齐左侧、右侧和中心的三个元素。中心元素=动态宽度，包含元素=浏览器宽度

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样式。

然后基本对齐样式表缩小到这个小提琴示例：

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

添加溢出以确保将标题的高度扩展到浮动元素的高度，以最高者为准。