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>

Answer 2

你不应该将float用于.container的子节点，并将.container设置为表行为，子节点用vertical-align：middle显示table-cell，如：

.head .container {
    display: table;
    height: 100%;
}
.position, .helpText, #clock {
    display: table-cell;
    vertical-align: middle;
    width: auto;
    float: none;
    text-align: center;
    height: 100%;
}

https://jsfiddle.net/Pik_at/rb0s1kLe/1/

将Div保持在一排

2 个答案: