[英]How to vertically align content within a div
我正在努力垂直居中內容。 這是一個屏幕截圖:
我需要一個浮動左側,因為側面會有更多你看不到的內容,但是我怎樣才能讓這個文本垂直居中? 另外我不確定我是否需要一個
標簽中的標簽
.newsletter_text_section {
width: 40%;
float: left;
padding: 15px;
font-size:24px;
padding-right: 0 !important;
display: inline-block;
height: 100%;
vertical-align: middle;
}
.newsletter_text_section p {
font-size:24px !important;
display: inline-block;
vertical-align: middle;
}
<!-- newsletter section -->
<div class="newsletter_section">
<div class="newsletter_text_section">
<p>Join Balance and get 20% off your first order</p>
</div>
<div class="newsletter_gif_section">
...
</div>
<div class="newsletter_input_section">
...
</div>
</div>
要解決這個問題,更快的方法是為元素的height
和line-height
設置相同的像素。 像這樣:
.box{
height : 10vh;
line-height: 10vh
}
否則,您還可以display: flex
來布局您的頁面,在flex
范圍內,您可以使用align-item
垂直對齊元素,如下所示:
.box {
display: flex;
align-items: center;
justify-content: center;
}
有關更多詳細信息,您可以參考此處。
下一個方法是調整父元素的padding
,因為您使用的是percent
單位,但我不推薦這種方式,因為它有時會產生副作用。
以上內容就是我現在的想法,希望對你有幫助。
您還可以使用 css 網格:
.newsletter_text_section { width: 40%; display: grid; padding: 10px; font-size:24px; align-items: center; border: 1px solid red; } .newsletter_text_section p { border: 1px solid blue; }
<!-- newsletter section --> <div class="newsletter_section"> <div class="newsletter_text_section"> <p>Join Balance and get 20% off your first order</p> </div> </div>
將此添加到元素的樣式:
position: absolute;
top: 50%;
謝謝,卡梅斯塔
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.