我正在尝试将搜索栏和标题中的按钮集中,以便它将以SVG徽标垂直为中心,但无法自己弄清楚。感谢您的帮助。预先感谢!
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:UsersDavidDesktopWebDevelopmentTestimagesNotWallalogo.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/
将 vertical-align: -5px;
更改为 vertical-align: middle;
。