img & text를 가로로 정렬 하시겠습니까?

Question

웹 개발로 아기 단계를 밟습니다. this Fiddle과 매우 유사한 로더 화면이있는 응용 프로그램이 있습니다.

데스크톱 브라우저에서는 텍스트/이미지를 세로 및 가로로 중앙에 배치하여 (눈을 여느) 받아 들일 수 있습니다.

그러나 작은 화면 크기로 응용 프로그램을 볼 때 텍스트/이미지가 화면 중앙에 수평으로 정렬되기 시작합니다.

나는 많은 관련 게시물과 블로그를 읽었지 만 장치 너비와 상관없이 내 텍스트/이미지를 중앙에 두지 못했습니다. fiddle 미리보기의 크기를 더 얇게 만들면 복제 할 수 있습니다.

<div id="preloader"> 
<div class="preloaderContent"> 
    <div id="loadLabel">Please Wait</div> 
    <img src="http://www.igfa.org/images/throbber.gif"><br> 
    </div> 
</div> 

#preloader { 
    display: table; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    margin:0; 
    padding:0; 
    background:#3399FF; 
    z-index:999; 
} 

.preloaderContent { 
    position: absolute; 
    left: 45%; 
    top: 40%; 
} 

.preloaderContent img { 
    display : block; 
    margin : auto; 
    text-align: center; 
} 

#loadLabel { 
    padding-bottom: 10px; 
    font-size: 30px; 
    font-weight: 300; 
    font-family: 'Segoe UI',Helvetica,Arial,'Sans-Serif'; 
    color: #FFFFFF; 
    text-align: center; 
} 

사과는 다소 엉망입니다. 누군가 내 방식으로 오류를 지적 할 수 있습니까?

Answer 1

응답 성이 좋은 CSS를 추가해야합니다.

@media (min-width: 768px) and (max-width: 979px) { ... } 


/* Landscape phone to portrait tablet */ 
@media (max-width: 767px) { ... } 


/* Landscape phones and down */ 
@media (max-width: 480px) { ... } 

위의 미디어 쿼리에 특정 CSS를 추가하면 장치 당 레이아웃을 수정할 수 있습니다. css 아래에 위의 미디어 쿼리를 넣어 두는 것을 잊지 마십시오 (안전한쪽에 있어야 함).

호프가 문제를 해결할 수 있기를 바랍니다.

Answer 2

50 % 및 50 %로 넣을 수 있으며이 음수 여백에 약 절반의 콘텐츠 크기를 더할 수 있습니다.

jsfiddle.net/z3zpz/1/

Answer 3

당신은 이런 일에 넣을 :

부정적인 마진 사업부의 중심이 위쪽보다는 중심에 있음을 의미

.preloaderContent { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    width: 200px; 
    height: 100px; 
    margin-top: -50px;/*half of height*/ 
    margin-left: -100px;/*half of width*/ 
} 

왼쪽 구석. 브라우저 창 크기에 따라 크기가 조정됩니다. 예 : http://jsfiddle.net/z3zpz/2/

Answer 4

는 높이와 내용의 폭 (.preloaderContent)를 알고 있다면 당신은이 일을 시도 할 수 있습니다이 하나

* { margin: 0; padding: 0; } 

html, body { height: 100%; } 

body { position: relative; background: #3399FF; } 

#preloader { display: table; width: 100%; height: 100%; } 

.preloaderContent { display: table-cell; vertical-align: middle; text-align: center; } 

.preloaderContent img { display : block; margin: 0 auto; } 

#loadLabel { padding-bottom: 10px; font-size: 30px; font-weight: 300; font-family: 'Segoe UI', Helvetica, Arial, 'Sans-Serif'; color: #FFFFFF; } 

Answer 5

을 시도합니다.

html, body { height: 100%; } 

#preloader {position: relative; background: #3399FF; width: 100%; height: 100%; } 

.preloaderContent { position:absolute; height:100px; width:160px; top:50%; left:50%; margin-top:-50px; margin-left:-80px; }