將搜索欄和按鈕垂直居中放置在標題中

我試圖將標題中的搜索欄和按鈕居中，這樣它就會垂直居中使用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:\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>

來源

2017-03-10 dawed1999

變化vertical-align: -5px;到vertical-align: middle;。

來源

2017-03-10 08:46:56 ata

垂直集中，你可以在父母的元素使用元素

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/

來源

2017-03-10 06:25:49 Robert

將搜索欄和按鈕垂直居中放置在標題中

回答

相關問題