2017-03-10 15 views
2

私は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>

答えて

1

変更vertical-align: middle;からvertical-align: -5px;の作業。

関連する問題