Question

我需要在Div中对齐3个项目。

每个项目必须在中心放置垂直。

第一项2％保证金左。
中心的第二项，必须是文本框。
第三项2％保证金权利。

第一项和第三项必须符合div（方形）。

我使用了对齐，但它没有用。这里有一个图形示例：

Answer 1

HTML

<div id="container">
    <div class="box" id="left"></div>
    <input type="text" name="search" placeholder="SEARCH HERE" id="searchbox">
    <div class="box" id="right"></div>  
</div><!-- end #container-->

CSS

#container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 95%;
    height: 90px;
    background-color: orangered;
}

.box {
    height: 75px;
    width: 75px;
    background-color: lightgreen;
}

#left {
    margin-left: 2%;
}

#right {
    margin-right: 2%;
}

input {
    width: 250px;
    padding: 18px;
    font-size: 2em;
}

DEMO：http://jsfiddle.net/xptx9wxn/2/

有关CSS Flexbox的更多信息，请访问：

水平对齐并垂直居中容器中的三个元素

1 个答案: