[英]How can i center the searchbar vertically?
.searchbar is my background for the searchbar, but i don't know how to center my searchbar to his background vertically. .searchbar 是我的搜索栏背景,但我不知道如何将我的搜索栏垂直居中到他的背景。
Here is my CSS这是我的 CSS
.searchbar {
display: block;
width: 100%;
height: 100px;
overflow: hidden;
background-color: lightgray;
text-align: center;
position: relative;
}
.searchbar input[type="text"] {
color: black;
text-align: left;
text-decoration: none;
width: 50%;
height: 40px;
font-size: 20px;
align-self: center;
position: relative;
vertical-align: middle;
}
And here is the html这是 html
<div class="searchbar">
<input type="text" placeholder="Search..." />
</div>
This is actually works这实际上是有效的
.searchbar {
display: block;
width: 100%;
height: 80px;
overflow: hidden;
background-color: lightgray;
text-align: center;
position: relative;
display: flex;
align-items: center;
}
.searchbar input[type="text"] {
color: black;
text-align: left;
text-decoration: none;
width: 50%;
height: 40px;
font-size: 20px;
align-self: center;
position: relative;
vertical-align: middle;
border-radius: 50px;
border: none;
margin: auto;
}
.searchbar {
width: 100%;
height: 100px;
overflow: hidden;
background-color: lightgray;
text-align: center;
}
.searchbar input[type="text"] {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
display: block;
color: black;
text-align: left;
text-decoration: none;
width: 50%;
height: 40px;
font-size: 20px;
align-self: center;
position: relative;
vertical-align: middle;
}
<div class="searchbar">
<input type="text" placeholder="Search..." />
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.