html - 将 Div 保持在行中

Question

它看起来像是一个简单的实现，但有些地方并不奏效。我在里面有一个标题，我试图水平放置 3 个元素的左、中和右。垂直这些元素将在中间对齐。 引用fiddle完整代码。
CSS

.head, .foot, .middle {
            position: absolute;
            width: 100%;
            left: 0;
        }
        .middle {
            top: 100px;
            bottom: 50px;
            height: 400px;
            background-color: #ffd;
        }
        .head {
            height: 100px;
            top: 0;
            background-color: #000;
            color: #fff;
        }
       .container {
            vertical-align: middle;
        }

        .helpText {

            margin-left: 50%;
        }

        #clock {
            float: right;
        }

        .position {
            position: relative;
        }

HTML

<div class="head">
    <div class="container">
        <div class="position">
            <span>Position: </span>
            <input type="radio" name="position" value="center" id="centerCheckbox" onclick="positionDiv()" checked>Center
            <input type="radio" name="position" value="lowerRight" id="lrCheckbox" onclick="positionDiv()" >Lower Right
        </div>
        <div class="helpText">Press Esc key to hide the window. Enter to show it again.</div>
        <div id="clock"></div>
    </div>
    </div>

Answer 1

我不确定这是否是您想要的。但它就在这里。

在容器上使用 table 并在各个 div 上使用 table-cell 每次都会得到一个很好的居中和垂直对齐的 div。

JSFiddle

body, html {
    margin:0px;
    padding:0px;
}
.container {
    background-color:yellow;
    width:100%;
    height:200px;
    display:table;
}
.container > div {
    padding:10px;
    text-align:center;
    border: 1px solid black;
    display:table-cell;
    vertical-align:middle;
}

<div class='container'>
    <div>Position:
        <input type="radio" name="position" value="center" checked='true' />Center
        <input type="radio" name="position" value="lowerRight" />Lower Right</div>
    <div>Press Esc key to hide the window. Enter to show it again.</div>
    <div>Clock</div>
</div>