为什么我的 h 标签不能垂直对齐？答案

【问题标题】：Why won't my h tags vertically align?为什么我的 h 标签不能垂直对齐？
【发布时间】：2015-06-16 21:43:27
【问题描述】：

在我的代码中，我使用 h 标签来表示我想要显示的不同文本。但由于某种原因，我的 h5 和 h6 标签不会很好地垂直对齐到左侧。看起来标题中的文本也在做某事

HTML

<head>
<meta charset="utf-8" />
<title>Amanda Farrington</title>
<link rel="stylesheet" href="css/demo.css" />
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,500' rel='stylesheet' type='text/css'>
</head>

<body>


    <div id="header">
        <a href="index.html"><div id="leftHeader">
        <img src="assets/logo2.jpg" alt="Logo" style="width:65px;height:65px">
        <h1>Amanda Farrington</h1>
    </div>
        <div id="nav">

      <ul>
        <li><a href="about.html">About</a></li>
        <li><a href="index.html/#workJump">Work</a></li>
        <li><a href="contact.html">Contact</a></li>
        <li><a href="notes.html">Notes</a></li>
      </ul>
        </div>
    </div>



    <div id="hero2">
        <h6>Project Type</h6>
        <h5>Project Title</h5>
    </div>


    <div id="workImage">
        <img src="assets/trees.jpg" alt="Logo" style="width:100%;height:100%">
    </div>

    <div id="workInfo">
        <p>BOUT MY PROJECTS<p>
    </div>
</body>
</html>

CSS

/*----------header styles-------------*/
#header {
  color: #D7DADB;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size : 15px;
  text-align: left;
  width: 100%;
  padding-left: 3em;
  position: relative;
  height: 15%;
  box-sizing: border-box;
  padding-top: 1em;

}


#header img
{
    float: left;
    padding-left: 3em;
}

h1{
width: 9em;
float: left;
padding-left: 0.5em;
color: #45CCCC;
padding-bottom: 1px;
}

#nav {
  width: 50%;
  margin:0;
  padding:0;
  text-align: right;
  color: red;
  font-size:20px;
  float: right;
  padding-right: 2em;

}

#nav ul {
  padding: 1px;
}

#nav li {
  display: inline;
  padding: 38px;
}

#nav li a {
  color: #2C3E50;
  text-decoration: none;
}

#nav li a:hover {
  color: #45CCCC;
}

    /*----------work page styles-------------*/
#hero2{
    width: 100%;
    height: 10em;
    position: relative;
    background: red;
    top: 5em;
}

#workImage
{
    top: 9%;
    width: 80%;
    z-index: 1;
    margin-left: auto;
    margin-right: auto;
    position: static;

}

#workInfo{

    width: 70%;
    height: 50em;
    margin-left: auto;
    margin-right: auto;

}

p{
        font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 25px;
      color: #2C3E50;
    float: left;
}
h5{

    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 40px;
      color: #2C3E50;
    float: left;
    display: inline-block;
    vertical-align: middle;

}

h6{

    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 20px;
    color: #45CCCC;
    float: left;

}

【问题讨论】：

标签： html css vertical-alignment

【解决方案1】：

由于您将float:left; 应用于<p>、<h5> 和<h6> 标记，因此您的父容器正在崩溃。浮动将项目从文档流中取出。因此，当您浮动div 中的所有元素时，div 将崩溃，因为它认为div 中没有任何内容。要强制div 尊重自身内部的浮动元素，您需要将clearfix 类应用于#hero2。这会将英雄正下方的图像和文本下推。

clearfixCSS

.clearfix:before, .clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after { clear: both; }

要更好地理解clearfix，请阅读this SO thread: "Which method of clearfix is best?"

【讨论】：