如何確保所有<h3>標籤的高度一致
P粉121447292
2023-08-20 11:15:19
<p>我拿到了h3標籤。其中一個較低
我嘗試使用margin: 0和padding,但它沒有起作用,我不知道哪裡出錯了。 </p>
<p>刪除align-items: center後,修復了高度,但如何使其在圖片容器中居中,而不破壞h3的高度
圖</p>
<p><br /></p>
<pre class="brush:css;toolbar:false;">.info-footer {
background-color: rgba(33, 40, 59, 0.8);
color: #fff;
border: 1px solid rgb(53, 56, 72);
width: 100%;
height: 14em;
display: flex;
justify-content: center;
gap: 200px;
padding: 20px 10px;
align-items:top;
}</pre>
<pre class="brush:html;toolbar:false;"><div class="info-footer">
<div class="info-footer-info">
<h3>菜單1</h3>
<ul>
<li><a href="#">關於我們</a></li>
<li><a href="#">常見問題</a></li>
<li><a href="#">條款與條件</a></li>
<li><a href="#">隱私權政策</a></li>
</ul>
</div>
<div class="info-footer-menu">
<h3>菜單2</h3>
<ul>
<li><a href="#">聯絡我們</a></li>
</ul>
</div>
</div></pre>
<p><br /></p>
從
.info-footer
樣式移除align-items: center;
。align-items
的作用是:選擇
center
表示將元素放置在flex
容器的中心,並圍繞此中心進行佈局。換句話說,你的footer-info
和footer-menu
與 flex 容器的中心對齊,而不是起始位置。