중첩 된 내용이없는 모든 장치의 세로 가운데 머리글 이미지

Question

단순해야하는 뭔가가있는 mare가 있습니다. 기본적으로 아래에 이미지와 일부 텍스트로 구성된 요소를 세로 및 가로 가운데에 배치하고 싶습니다. 모든 장치에서 일종의 환영 화면으로 일관성을 유지할 필요가 있습니다. 아마도 백분율을 사용하고 있을까요?

아래 코드는 내비게이션 탭의 다음 요소입니다. 그러나 현재 내 코드의 문제점은 콘텐츠의 중첩으로 인해 약간의 안내가 필요하다는 것입니다. 뷰포트가 다양하기 때문에 고정 된 높이를 코드에 넣을 수 없습니다.

이 문제에 도움을 주시면 감사하겠습니다.

HTML

<header class="header-content text-center"> 
    <img src="assets/img/sample.png"/> 
    <h1>some text</h1> 
    <h2>here is some more text that I am working on blah</h2> 
    </header> 

    <section class="container"> 
    <ul class="nav nav-tabs nav-justified"> 
     <li data-toggle="tab" class="active"><a href="#home">Test</a></li> 
     <li><a data-toggle="tab" href="#menu1">test1</a></li> 
     <li><a data-toggle="tab" href="#menu2">test2</a></li> 
     <li><a data-toggle="tab" href="#menu3">test3</a></li> 
    </ul> 

    <div class="tab-content"> 
     <div id="home" class="tab-pane fade in active"> 
     <h3>test</h3> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
     </div> 
     <div id="menu1" class="tab-pane fade"> 
     <h3>test1</h3> 
     <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
     </div> 
     <div id="menu2" class="tab-pane fade"> 
     <h3>test2</h3> 
     <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p> 
     </div> 
     <div id="menu3" class="tab-pane fade"> 
     <h3>test3</h3> 
     <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p> 
     </div> 
    </div> 
    </section> 

CSS

header.header-content{ 
    color:#fff; 
    margin: auto; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin-right: -50%; 
    transform: translate(-50%, -50%) 
} 

Answer 1

당신은 항상 브레이크 포인트를 사용할 수 있습니다. 기본적으로, 다음과 같이 작동

@media screen and (max-width: 1000px) { 
    /* Fill with styling rules */ 
} 

@media

는

screen은 자명하다 등, 다른 장치, 스크린 폭이 서로 다른 규칙을 정의하기 위해 사용된다.

(max-width: 1000px)은 1000 픽셀 이하의 모든 것이 그 스타일 적용 규칙을 적용한다는 것을 의미합니다. 또 다른 방법은 min-width을 사용하는 것인데, 그 반대입니다.