Margin on inline pic moving every other object - html

Question

I have the following Code. All elements should be in the same line in my header, so I've put them all to inline-blocks.
Now they all move down a bit because of the height of the picture.
If I move down the picture a bit with margin or padding the whole line moves down.
What would be the best approach to keep everything in a line and have the center of the picture be inline and not at the bottom as it is now?
<header>
<div id="headerBox">
<h1>hi</h1>
<p>hello<span>/</span> Pw <span>(ID123)</span></p>
<img src="plus.png" id="plus" />
<span id="kunden">Kunden/Projekt anlegen</span>
<input type="text" />
<img src="girl.png" id="girl">
<div id="navArrows">
<ul>
<li>Projektübersicht</li>
<li>Konfigurieren</li>
<li>Ergebnisse</li>
<li>Landingpage</li>
<li>Prüfen</li>
</ul>
</div>
</div>
</header>

Answer 1

To achieve this layout, one can use an unordered list with the CSS display property on each item set to inline-block.
<ul class="box">
<li>
<a href="#">
<img src="plus.png">
<h4>Your text</h4>
<p>Your text</p>
</a>
</li>
<li>
<a href="#">
<img src="girl.png">
<h4>Your text</h4>
<p>Your text</p>
</a>
</li><!-- more list items -->
</ul>
When the items have different heights, you’ll see some strange stacking issues. (The second item may be taller or shorter. With floats that fifth item catches on it.)
Instead of float, I give each list item a width and change the display from block to inline-block.
ul.box li {
width: 200px;
display: inline-block;
}
For more information about this styling, this tutorial may help:
http://blog.teamtreehouse.com/using-inline-block-to-display-a-product-grid-view
Hope this helps!

Answer 2

The solution to my Problem was the css attribute
vertical-align: text-top;
on the picture.
More about it here http://www.w3schools.com/cssref/pr_pos_vertical-align.asp