H1標籤爲什麼不與div的頂部對齊？

Question

我試圖讓H1與其他div垂直對齊。

這是代碼。

header { 
 
    padding: 0; 
 
    background-color: #000032; 
 
} 
 
    header div { 
 
    display: inline-block; 
 
    text-align: center; 
 
    padding: 0; 
 
    } 
 
    header ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    } 
 
    header #social { 
 
    float: left; 
 
    } 
 
    header li img { 
 
    height: 30px; 
 
    margin: 15px; 
 
    margin-right: 0; 
 
    } 
 
    header img { 
 
    display: block; 
 
    } 
 
    header h1 { 
 
    font-size: 45px; 
 
    margin: 0; 
 
    display: block; 
 
    } 
 
    header h1 a { 
 
    color: #FFF; 
 
    text-decoration: none; 
 
    } 
 
    header #menu { 
 
    float: right; 
 
    } 
 

 
main { 
 
    height: 100vh; 
 
}

<header class="row--no-gutter"> 
 
    <div class="col--1-of-3"> 
 
     <ul> 
 
     <li id="social"><a href="#"><img src="../img/_f_logo_online/png/FB-f-Logo__blue_100.png" alt="Facebook"></a></li> 
 
     <li id="social"><a href="#"><img src="../img\Twitter_Starter_Kit\Twitter_Social_Icon_Rounded_Square/Twitter_Social_Icon_Rounded_Square_Color.png" alt="Twitter"></a></li> 
 
     <li id="social"></li> 
 
     <li id="social"></li> 
 
     </ul> 
 
    </div><div class="col--1-of-3"> 
 
     <h1><a href="#">Lorem.</a></h1> 
 
    </div><div class="col--1-of-3"> 
 
     <ul> 
 
     <li id="menu">Om</li> 
 
     <li id="menu">lorem1</li> 
 
     <li id="menu">ipsun</li> 
 
     </ul> 
 
    </div> 
 
    </header>

但是，正如你可以在圖片中的H1不與頂部對齊見。爲什麼它這樣做，我該如何解決它？

Answer 1

使header h1的inline-block;，併爲其分配vertical-align: middle;，再加上還可以指派vertical-align: middle;到包含ul與社會圖標的DIV：

header { 
 
    padding: 0; 
 
    background-color: #000032; 
 
} 
 

 
header div { 
 
    display: inline-block; 
 
    text-align: center; 
 
    padding: 0; 
 
    vertical-align: middle; 
 
} 
 

 
header ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
header #social { 
 
    float: left; 
 
} 
 

 
header li img { 
 
    height: 30px; 
 
    margin: 15px; 
 
    margin-right: 0; 
 
} 
 

 
header img { 
 
    display: block; 
 
} 
 

 
header h1 { 
 
    font-size: 45px; 
 
    margin: 0; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 

 
header h1 a { 
 
    color: #FFF; 
 
    text-decoration: none; 
 
} 
 

 
header #menu { 
 
    float: right; 
 
} 
 

 
main { 
 
    height: 100vh; 
 
}

<header class="row--no-gutter"> 
 
    <div class="col--1-of-3"> 
 
    <ul> 
 
     <li id="social"> 
 
     <a href="#"><img src="../img/_f_logo_online/png/FB-f-Logo__blue_100.png" alt="Facebook"></a> 
 
     </li> 
 
     <li id="social"> 
 
     <a href="#"><img src="../img\Twitter_Starter_Kit\Twitter_Social_Icon_Rounded_Square/Twitter_Social_Icon_Rounded_Square_Color.png" alt="Twitter"></a> 
 
     </li> 
 
     <li id="social"></li> 
 
     <li id="social"></li> 
 
    </ul> 
 
    </div> 
 
    <div class="col--1-of-3"> 
 
    <h1><a href="#">Lorem.</a></h1> 
 
    </div> 
 
    <div class="col--1-of-3"> 
 
    <ul> 
 
     <li id="menu">Om</li> 
 
     <li id="menu">lorem1</li> 
 
     <li id="menu">ipsun</li> 
 
    </ul> 
 
    </div> 
 
</header>

Answer 2

問題是h1的父元素，則div：

header div { 
    display: inline-block; 
} 

，因爲它表現得像一個這樣的內聯塊的事情發生，它更改爲block避免這個問題：

header { 
 
    padding: 0; 
 
    background-color: #000032; 
 
} 
 
    header div { 
 
    display: block; 
 
    text-align: center; 
 
    padding: 0; 
 
    } 
 
    header ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    } 
 
    header #social { 
 
    float: left; 
 
    } 
 
    header li img { 
 
    height: 30px; 
 
    margin: 15px; 
 
    margin-right: 0; 
 
    } 
 
    header img { 
 
    display: block; 
 
    } 
 
    header h1 { 
 
    font-size: 45px; 
 
    margin: 0; 
 
    display: block; 
 
    } 
 
    header h1 a { 
 
    color: #FFF; 
 
    text-decoration: none; 
 
    } 
 
    header #menu { 
 
    float: right; 
 
    } 
 

 
main { 
 
    height: 100vh; 
 
} 
 

 
.col--1-of-3 { 
 

 
    float: left; 
 
    }

<header class="row--no-gutter"> 
 
    <div class="col--1-of-3"> 
 
     <ul> 
 
     <li id="social"><a href="#"><img src="../img/_f_logo_online/png/FB-f-Logo__blue_100.png" alt="Facebook"></a></li> 
 
     <li id="social"><a href="#"><img src="../img\Twitter_Starter_Kit\Twitter_Social_Icon_Rounded_Square/Twitter_Social_Icon_Rounded_Square_Color.png" alt="Twitter"></a></li> 
 
     <li id="social"></li> 
 
     <li id="social"></li> 
 
     </ul> 
 
    </div><div class="col--1-of-3"> 
 
     <h1><a href="#">Lorem.</a></h1> 
 
    </div><div class="col--1-of-3"> 
 
     <ul> 
 
     <li id="menu">Om</li> 
 
     <li id="menu">lorem1</li> 
 
     <li id="menu">ipsun</li> 
 
     </ul> 
 
    </div> 
 
    <div style="clear:left;"></div> 
 
    </header>

你也必須使用float: left爲了保持佈局的結構

Answer 3

您的header div規則集display: inline-block;和內聯元素具有baseline的默認垂直對齊。請嘗試將其更改爲top。

另請注意，您的ID必須是唯一的。

header { 
 
    padding: 0; 
 
    background-color: #000032; 
 
} 
 

 
header div { 
 
    display: inline-block; 
 
    text-align: center; 
 
    padding: 0; 
 
    vertical-align:top; 
 
} 
 

 
header ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
header #social { 
 
    float: left; 
 
} 
 

 
header li img { 
 
    height: 30px; 
 
    margin: 15px; 
 
    margin-right: 0; 
 
} 
 

 
header img { 
 
    display: block; 
 
} 
 

 
header h1 { 
 
    font-size: 45px; 
 
    margin: 0; 
 
    display: block; 
 
} 
 

 
header h1 a { 
 
    color: #FFF; 
 
    text-decoration: none; 
 
} 
 

 
header #menu { 
 
    float: right; 
 
} 
 

 
main { 
 
    height: 100vh; 
 
}

<header class="row--no-gutter"> 
 
    <div class="col--1-of-3"> 
 
    <ul> 
 
     <li id="social"> 
 
     <a href="#"><img src="../img/_f_logo_online/png/FB-f-Logo__blue_100.png" alt="Facebook"></a> 
 
     </li> 
 
     <li id="social"> 
 
     <a href="#"><img src="../img\Twitter_Starter_Kit\Twitter_Social_Icon_Rounded_Square/Twitter_Social_Icon_Rounded_Square_Color.png" alt="Twitter"></a> 
 
     </li> 
 
     <li id="social"></li> 
 
     <li id="social"></li> 
 
    </ul> 
 
    </div> 
 
    <div class="col--1-of-3"> 
 
    <h1><a href="#">Lorem.</a></h1> 
 
    </div> 
 
    <div class="col--1-of-3"> 
 
    <ul> 
 
     <li id="menu">Om</li> 
 
     <li id="menu">lorem1</li> 
 
     <li id="menu">ipsun</li> 
 
    </ul> 
 
    </div> 
 
</header>