내 헤더 이미지에있는 텍스트와 fa 갈매기를 부트 스트랩으로 맞 춥니 다

Question

부트 스트랩을 처음 사용하고 온라인 수업을 통해 웹 사이트를 만들었습니다! 나는 이제 내 필요에 맞게 사용자 정의하려고합니다. 필자는 텍스트와 fa-chevron의 정렬 방법을 알고 싶습니다. 소녀의 머리 꼭대기에 내 텍스트가 있고 내가 지금 가지고있는 갈매기 모양이 좋겠다. 그러나 문제는 내가 이미지를 < 370로 축소하면 텍스트가 내 메뉴에 마스크되고 가로 모드에서는 모든 것이 느슨해집니다. 나는 많은 조합을 시도했다! 감사! 그것에 대해

내 CSS는 ..

#home-heading h3 { 
    color: #fff; 
    font-size: 40px; 
    font-weight: 700; 
    margin: -75px 0 300px 0; 
} 

당신이 enter link description here

Answer 1

시도 위치의 상대 및 절대의 사이트를 볼 수 있습니다 당신은 절대 위치를 시도 할 수도

#home-content-box-inner { 
    display: table-cell; 
    vertical-align: middle; 
    /* text-align: center; */ 
    position: relative; 
} 

#home-heading { 
    -webkit-animation-delay: .5s; 
    animation-delay: .5s; 
    position: absolute; 
    top: according to ur need 
} 

Answer 2

입니다. 콘텐츠 주위에 포장 사업부를 추가 (나는 두 개의 서로 다른 요소입니다 있으리라 믿고있어,하지만 당신은 나에게 마크 업을 보여 주면, 당신은 저를 도울 수 있습니다.

#home-heading { height: 500px; width: 100%; background: #000; } 
 
i {color: #fff;} 
 

 
.text { 
 
    position: absolute; 
 
    top: 30px; 
 
    left: 0; 
 
    text-align: center; 
 
    margin: 0 auto; 
 
    width: 100%; 
 
} 
 

 
#home-heading h3 { 
 
    color: #fff; 
 
    font-size: 40px; 
 
    font-weight: 700; 
 
    text-align: center; 
 
} 
 

 
#home-heading i { 
 
    margin-top: 300px; 
 
    display: block; 
 
}

<div id="home-heading"> 
 
    <div class="text"> 
 
    <h3>Title</h3> 
 
    <i>Chevron</i> 
 
    </div> 
 
</div>

Answer 3

당신은 연결한다 텍스트 페이지의 상단에 위치하지 그것을 이동하는 여백을 사용하여 당신은 chevorn와 동일 할 수는 DIV에 클래스를 추가

UPDATE :. Rember는 쉐브론 DIV에 클래스 갈매기를 추가 :

#home-heading h3 { 
    color: #fff; 
    font-size: 40px; 
    font-weight: 700; 
    position: absolute; 
    left: 50%; 
    top: 15%; 
    width: 80%; 
    transform: translateX(-50%); 
} 

나는이 또한 일부 변경 사항을 적용했습니다 :

당신은 고정 된 네비게이션 바 다음과 같은 내용에 패딩을 추가 할 필요가

.chevron{ 
    color: #fff; 
    font-size: 18px; 
    font-weight: 700; 
    position: absolute; 
    left: 50%; 
    bottom: 15%; 
    width: 80%; 
    transform: translateX(-50%); 
}