时间戳

首页 > 解决方案 > 如何垂直居中对齐 div 内的多个内联 div？

html - 如何垂直居中对齐 div 内的多个内联 div？

问题描述

如何垂直居中对齐 div 内的多个内联 div？

我正在使用 HTML5 和 CSS 3。我尝试了下面的代码，但它不是垂直居中对齐的。

HTML 代码

<!DOCTYPE html>
<html>
    <head>
        <title>result</title>
    </head>
    <body>
        <div class="parent">
            <div class="child">one</div>
            <div class="child">two</div>
            <div class="child">three</div>
          <div class="child">
            <label for="Recordsperpage">Records:</label>
                <select name="Recordsperpage">
                <option value="100">100</option>
                <option value="1000">1000</option>
                <option value="10000">10000</option>
                </select>
        </div>
    </body>
</html>

CSS 代码

.parent {
    width: 900px;
    height:200px;
}

.child {
    width: 200px;
    display: inline-block;
    top:50%;
    left:50%;
    text-align: center;
    border-right: 1px solid red;
}

我的孩子 div 应该是内联的。

我的子 div 不是垂直居中对齐父 div 的高度 200px；

请帮我

标签： htmlcss

解决方案

推荐阅读