CSS垂直对齐和浮动问题答案

【问题标题】：CSS vertical alignment and floating issueCSS垂直对齐和浮动问题
【发布时间】：2013-12-18 13:49:30
【问题描述】：

我正在创建一个网站，可以预订一小时的区块。我正在尝试正确的样式。

它应该是这样的：

这是我目前写的代码：

<html>
<head>
    <title></title>
    <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400" rel="stylesheet" type="text/css" />
    <style type="text/css">
        body
        {
            font-family: 'Source Sans Pro';
            font-weight: 300;
            margin-left: 25px;
            margin-right: 25px;
            margin-top: 10px;
            margin-bottom: 10px;
        }
        #header
        {
            height: 50px;
            width: 100%;
        }
        .block
        {
            background-color: #e5e5e5;
            display: inline-block;
            width: 275px;
            height: 35px;
        }
        .block-sideline
        {
            background-color: #999999;
            display: inline-block;
            margin-right: 5px;
            width: 5px;
            height: 35px;
        }
        .block-span
        {
            margin-left: 5px;
            margin-right: 5px;
        }
        .block-hours
        {
            color: #000000;
        }
        .block-status
        {
        }
        .block-notavailable .block-sideline
        {
        }
    </style>
</head>
<body>
    <div id="header">
        <img id="header-logo" src="header-logo.svg" height="50px" width="125px" />
    </div>
    <div id="content">
        <h2>Sunday, December 1, 2013</h2>
        <div class="block">
            <div class="block-sideline">
            </div>
            <span class="block-hours">6:00 AM &ndash; 7:00 AM</span>
            <span class="block-status">Not available</span>
        </div>
    </div>
</body>

现在，这就是它在 IE 中的样子：

所以，现在，当我用float: left; 向左浮动小时和边线，用float: right; 向右浮动状态时，它看起来像这样：

现在边距和颜色并不重要，但我怎样才能使 div 中的文本居中并让它同时浮动？此外，在上面的屏幕截图中，边距未显示在右侧。这是为什么呢？

【问题讨论】：

最简单的方法是使用line-height 等于.block 的高度 - jsfiddle.net/d2epj - 虽然如果高度是动态的或者有超过一行的文本，它不会工作。

标签： html css css-float vertical-alignment

【解决方案1】：

这里是 CSS

.block-sideline
{
    background-color: #999999;
    display: inline-block;
    margin-right: 5px;
    width: 5px;
    height: 35px;
    float:left;
}
.block-hours
{
    float:left; 
    line-height:225%;
    color: #000000;
}

.block-status
{
    float:right;
    line-height:225%;
}

基本上添加浮点数和行高。

【讨论】：