Div O zaman bununla diğer

Question

yaşıyorum konulara sonraki hizalanmamıştır: https://jsfiddle.net/xfpfjqw0/

header .logo { 
 
    display: inline-block; 
 
    height: 150px; 
 
    width: 40%; 
 
} 
 
header .search { 
 
    display: inline-block; 
 
    height: 150px; 
 
    width: 40%; 
 
}

<header> 
 
    <div class="logo"></div> 
 
    <div class="search"> 
 
    <form action="/search/" method="get"> 
 
     <input type="text" name="q"> 
 
     <input type="submit" value="Search" class="btn"> 
 
    </form> 
 
    </div> 
 
</header>

Ben inşa ediyorum bir web sitesinden bir alıntı. Eğer iki unsuru incelerseniz, ilkinin ilk soldan başlayıp ikincisinin sağ alt köşesinde başladığını göreceksiniz.

Bu neden oluyor?

Answer 1

Hizalamayı değiştirmek için öğenin vertical-align değerini belirtmeniz gerekir. Varsayılan değer baseline ama bottom

Like this

bu burada daha büyük bir açıklamasına bakın, örneğin top, middle için gibi değiştirebilirsiniz: Why is this inline-block element pushed downward?