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

然后基本对齐样式表缩小为this fiddle example :

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

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