Vertically centering the search bar and button in a header

Question

I'm trying to center the search bar and button in the header so that it will alaways vertically centered with the SVG logo but can't figure it out by myself. Would appreciate the help. Thanks in advance!

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

to vertically centralize elements you can use on parents elements

display:flex;     align-items:center;

E.g:

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

and if you want to center horizontally elements you can add

justify-content: center;

Working example https://jsfiddle.net/2fe2yr87/

Answer 2

Change vertical-align: -5px; to vertical-align: middle;.