100 VH kapsayıcıda metni hizalamada sorun oluştu

Question

6 saat boyunca bir sorunla karşılaştım ve yardım istemem gerekiyor. İlk bölümdeki metni düzgün bir şekilde hizalamakta zorlanıyorum.

Şu ana kadarki site. İşte

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> 

I düzeni her kesitinin yüksekliği ve genişliği değerleri belirli bir düzen elde VH yüzdeleri ile tanımlanır, yığılı bölümlerden oluşan bir web sitesi oluşturduk.

Bu, CSS'de bir bölümün nasıl tanımlandığına bir örnektir. uygulanan .intro_description sınıfı ile ana kabın içinde

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

uygulanan .fix sınıfı ile bir div. İşte bunun için CSS.

.fix { 

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

İdeal olarak başlıkta adı geçen ve açıklama ekli resim ile tutarlıdır dolgu ile görünüm altına doğru aynı hizada olmalıdır.

Eğer yanlış ne yapıyorum söyleyebilir misiniz?

Answer 1

Ne istediğinizi söylemek zor, ama yine de: .fix sınıfınız position: absolute'a sahiptir. Bu, yalnızca ana öğe position ayarında (varsayılan static dışında) çalışıyorsa çalışacaktır. Bu nedenle, her şeyden önce position: relative'u .intro_description'a ekleyin. Bu, .intro_description konumunu değiştirmeyecek, ancak .fix'un mutlak konumlandırmasının etkin olmasını sağlayacaktır.

DÜZENLEME: yorum sonra

Ekleme:

1.) Eğer display:relative için üst öğe değişti, ama olmak zorunda position: relative

2.) Sen .fix için iki kural var (bir bir medya sorgusunda bunlar). Sonunda, .fix bu parametreleri için var

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

Yani bunun altına hizalanmasının üst element (yani takip eden section ile elde edilmiş), bir top ortamda, yüksekliği gerildikten olmadan. transform: translate(0%, -50%); ayarını (bu bloğu kendi yüksekliğinin% 50'sini yukarı taşır) tutmak isteyip istemediğinizi, bir zevk meselesidir.