糾正100個VH容器中的文字問題

Question

我一直被困在一個問題上6個小時，我需要尋求幫助。我無法在第一部分中正確對齊文本。

這是該網站到目前爲止。

Inspect Site Here

下面是HTML。

<section class="intro_description"> 
    <div class="fix "> 
    <h1>Title of Project</h1> 
     <p class="paragraph">Dear Stackexchange, this is my section that I am having problems with. I would be very thankful if you could please tell me what I'm doing wrong.</p> 
    <div> 
</section> 

我已經創建了一個網站，佈局由層疊部分，其中每個部分的高度和寬度值通過使用VH百分比定義爲獲得特定的佈局。

這是如何在CSS中定義節的示例。

.intro_description { 
height: 70vh; 
width: 100%; 
background: #FFFFFF; 
display: relative; 
padding: 40px; 
} 

應用了.intro_description類的父容器的內部是應用了.fix類的另一個div。這是CSS的。

.fix { 

position: absolute; 
top:50%; 
bottom:10%; 
left:12%; 
right: 10%; 
transform:translate(0%, -50%); 
-webkit-transform:translate(0%, -50%); 
} 

理想情況下，標題和說明應該朝着視口的底部對齊，並且填充與附加圖像一致。

你能告訴我，我做錯了什麼？

Answer 1

很難說出你想要什麼，但無論如何：你的班級.fix有position: absolute。這僅在父元素具有某些position設置（除了默認static之外）時纔有效。因此，首先，將position: relative添加到.intro_description。這不會改變.intro_description的位置，但會使.fix的絕對定位有效。

編輯：

加成後評論：

1）您更改父元素display:relative，但它必須是position: relative

2）你有兩個規則.fix（一個他們在媒體查詢中）。最終，.fix必須具有這些參數：

.fix { 
    position: absolute; 
    bottom: 0px !important; 
    top: inherit; 
} 

因此它對準到它的底部的父元素（即，隨後的section以上），而不受top設置在高度被拉伸。無論你想保持transform: translate(0%, -50%);的設置（這個塊將其移動高度的50％），都是一種品味。