html - div 内のフォームを垂直方向にセンタリングする

Question

<div class="parent">
    <div class="left-child">
        <img src="logo.jpg" alt="logo">
    </div>
    <div class="right-child">
        <form action="#">
            <input type="text" value="search">
        </form>
    </div>
</div>

ロゴの高さが高くなったら縦中央right-child揃えにしたいです。left-child

誰かが私を助けることができますか？

PS: ロゴはユーザーがアップロードします。そのため、ロゴの高さについてはわかりません。

Answer 1

HTML:

<div class="parent">
    <div class="left-child">
        <div><img src="logo.jpg" alt="logo" /></div>
    </div>
    <div class="right-child">
        <form action="#">
            <input type="text" value="search1" /><br/>
            <input type="text" value="search2" /><br/>
            <input type="text" value="search3" />
        </form>
    </div>
</div>

CSS:

.parent {
    height: 400px;
    width: 100%;
    position: relative;
}

.left-child {
    width: 50%;
    height: 100%;
    display: table;
    position: absolute;
}
.left-child div {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.right-child {
    width: 50%;
    height: 100%;
    display: table;
    position: absolute;
    left: 50%;
}

.right-child form {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

クレジット

フィドル

Answer 2

将来のより良い答えは、フレックスボックスモデルを使用することです

• http://flexiejs.com/playground/
• https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_flexible_boxes
• http://caniuse.com/flexbox

必要なものをサポートする CSS は次のとおりですhttp://jsfiddle.net/BfZFJ/1/

.parent {
    /* Use flex box layout to layout its children */
    display: box;
    /* Vertically center its children */
    box-align: center;    
}    

.right-child {
    /* The child on the right will take up all the remaining horizontal space */
    box-flex: 1;
}

/* Don't have to do anything to left-child, it automatically takes up its natural size */

現実の世界では (今のところ)、ベンダー プレフィックスを使用する必要があることに注意してください。

• 表示: [-webkit-box, -moz-box]
• -webkit-box-flex, -moz-box-flex
• -webkit-box-align, -moz-box-align