私はSVGロゴの中央に垂直になるように検索バーとボタンを中央に配置しようとしていますが、自分では理解できません。 助けていただければ幸いです。 ありがとうございます!検索バーとボタンをヘッダ内に垂直にセンタリングする
<div style="display:flex; align-items:center;">
<div> 1 </div>
<div> 2 </div>
<div> 3 </div>
</div>
、あなたが追加することができ、水平方向の要素を中央にしたい場合:垂直あなたが親要素
display:flex; align-items:center;
例:上で使用できる要素を一元化する
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>