How to vertically center align multiple inline divs inside div?

Question

I am using HTML5 and CSS 3. I tried below code, but it is not vertically center aligned.

HTML Code

<!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 Code

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

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

My children divs should be inline.

My child div is not vertical center aligned to parent div's height 200px;

Please help me

How to vertically center align multiple inline divs inside div?

0 Answers0