Question

我正在尝试将标题中的搜索栏和按钮居中，这样它就会以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>

Answer 1

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

display:flex;     align-items:center;

E.g：

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

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

justify-content: center;

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

Answer 2

将vertical-align: -5px;更改为vertical-align: middle;。

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

2 个答案: