Question

我仍然很新，但我开始学习。似乎有很多方法可以垂直居中我的内容，但我无法弄清楚如何将它应用于我已经拥有的代码以及我的标题和段落。我希望我的h2标题和.why_text垂直居中。最好的方法是什么？这是我到目前为止所拥有的。（注意，我将有5个部分，因此奇数/偶数）

<style><!--
p.large {
    line-height:30px;
    font-size:16px;
}
.why_section   {margin-bottom: 80px;}

      .why_section:nth-child(odd) h2 {display: block; width: 64%; margin-left: 5%; float: right;}
      .why_section:nth-child(odd) .why_image { width: 30%; margin-right:1%; float: left;}
      .why_section:nth-child(odd) .why_text {width: 64%; margin-left: 1%; float: right;}

      .why_section:nth-child(even) h2 {display: block; width: 64%; margin-left: 0%; float: left;}
      .why_section:nth-child(even) .why_image { width: 30%; margin-left:1%; float: right;}
      .why_section:nth-child(even) .why_text {width: 64%; margin-right: 5%; float: left;}

       .why_section .why_image img{ width: 100%;}

       .clear {clear: both;}

@media only screen and (max-device-width: 600px)  {
            .why_section:nth-child(odd) h2 {display: block; width: 100%; margin-left: 0%; float: none;}
            .why_section:nth-child(odd) .why_image { width: 100%; margin-left: 0%; float: none;}
            .why_section:nth-child(odd) .why_text {width: 100%; margin-right: 0%; float: none;}

            .why_section:nth-child(even) h2 {display: block; width: 100%; margin-left: 0%; float: none;}
            .why_section:nth-child(even) .why_image { width: 100%; margin-left: 0%; float: none;}
            .why_section:nth-child(even) .why_text {width: 100%; margin-right: 0%; float: none;}
        }
--></style>
<div id="why_wrapper">
<div class="why_section">
<h2>...</h2>
<div class="why_image"><img src="..." /></div>
<div class="why_text">
<p class="large">...</p>
</div>
<div class="clear"></div>
</div>

在html中垂直居中标题和段落

0 个答案: