內聯圖片移動其他所有對象的邊距

Question

我有以下代碼。所有元素應該位於我的標題中的同一行，因此我已將它們全部放入內嵌塊中。
由於圖片的高度，現在它們都向下移動一點。
如果我將圖片向下移動一點，並留有餘量或填充，則整行將向下移動。

什麼是最好的方法來保持一切排隊，並讓圖片的中心內聯，而不是現在的底部？

<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><a href="#">Projektübersicht</a></li> 
         <li><a href="#">Konfigurieren</a></li> 
         <li><a href="#">Ergebnisse</a></li> 
         <li><a href="#">Landingpage</a></li> 
         <li><a href="#">Prüfen</a></li> 
        </ul> 
       </div> 



     </div> 
    </header> 

Answer 1

解決我的問題是圖片上的CSS屬性

vertical-align: text-top; 

。

更多關於在這裏http://www.w3schools.com/cssref/pr_pos_vertical-align.asp

Answer 2

要實現這種佈局，可以在每個項目設置爲內聯塊的情況下，使用帶有CSS顯示屬性的無序列表。

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

當項目具有不同的高度，你會看到一些奇怪的堆積問題。 （第二個項目可能會更高或更短，第五個項目會捕捉漂浮物）

而不是浮動，我給每個列表項目一個寬度並將顯示從塊更改爲內嵌塊。

ul.box li { 
 
    width: 200px; 
 
    display: inline-block; 
 
}

有關此樣式的更多信息，本教程可以幫助：

http://blog.teamtreehouse.com/using-inline-block-to-display-a-product-grid-view

希望這有助於！