gpt4 book ai didi

html - 在标题中垂直居中搜索栏和按钮

转载 作者:行者123 更新时间:2023-11-27 23:16:50 26 4
gpt4 key购买 nike

我试图将标题中的搜索栏和按钮居中,以便它始终与 SVG Logo 垂直居中,但我自己无法弄清楚。非常感谢您的帮助。提前致谢!

header {
text-align: right;
background-color: #333333;
border-bottom-width: 1px;
}

.clear {
display: inline;
}

.LogoHeader {
position: relative;
top: 0px;
right: 0px;
height: 25%;
width: 25%;
border-spacing: 20px;
vertical-align: -5px;
margin-left: 47px;
}

.SearchForm {
text-align: right;
display: inline;
padding: 0px 0px
}

.SearchField {
border: none;
margin: 0;
display: inline-block;
line-height: 20px;
}

.SearchButton {
display: inline;
background-color: deeppink;
border-style: none;
line-height: 20px;
}
<header>
<a href="#website" class="clear" style=" margin-left: 47px;"><img class="LogoHeader" src="C:\Users\David\Desktop\WebDevelopmentTest\images\NotWalla\logo.svg" alt="My news website"></a>
<span>
<form class="SearchForm";>
<input class="SearchField" type="text" name="q" value autocomplete="off">
<input class="SearchButton" type="submit" value="Search">
</form>
</span>
</header>

最佳答案

垂直集中您可以在父元素上使用的元素

display:flex;     align-items:center;

例如:

<div style="display:flex;     align-items:center;"> 
<div> 1 </div>
<div> 2 </div>
<div> 3 </div>
</div>

如果你想水平居中元素你可以添加

justify-content: center;

工作示例 https://jsfiddle.net/2fe2yr87/

关于html - 在标题中垂直居中搜索栏和按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42708305/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com