I need to align 3 items inside Div.
Every item must be placed vertically in the center.
Item First and Third must fit the div(square).
I used alignment but it didn't work. Here there is a graphic example:
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/
For more information about CSS Flexbox visit:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.