센터에 넣으려고 할 때 텍스트가 간섭을 받음

Question

정확히 왜 이런 일을하는지 모르겠지만 단순히 텍스트를 가로 및 세로로 가운데에 배치하려고합니다. 나는이 작업을 수행하는 다음과 같은 예

1

살펴 보았다 방법에 대한 몇 가지 SO 답변을 본 (I는 SO 답변이 예를했지만, 난 아직 10 렙이없는 2 개 링크를 게시 할 수 없습니다)

을

하지만 웬일인지 그것은 나를 위해 일하지 않고있다. Live demo 그것은 수평으로 센터링하고 있지만 수직으로 나는 화면에 이상한 우스꽝 스러움을 얻고 있습니다. 심지어 jQuery (아래 예)에서이 작업을 시도해 보았지만 발견 한 2 가지 답변과 동일한 권리 포옹을 제공하므로 사소한 문제가 있음을 알고 있습니다. 여기 내 HTML과 CSS의 :

HTML이

<div 
    class="parallax-image-wrapper parallax-image-wrapper-100" 
    data-anchor-target="#dragons + .gap" 
    data-bottom-top="transform:translate3d(0px, 200%, 0px)" 
    data-top-bottom="transform:translate3d(0px, 0%, 0px)"> 

    <div 
     class="parallax-image parallax-image-100" 
     style="background-image:url(images/pot.jpg)" 
     data-anchor-target="#dragons + .gap" 
     data-bottom-top="transform: translate3d(0px, -80%, 0px);" 
     data-top-bottom="transform: translate3d(0px, 80%, 0px);" 
    ></div> 
    <!--the +/-80% translation can be adjusted to control the speed difference of the image--> 

</div> 

    <div class="gap gap-100"> 
     <h3 class="centerMe">Why waste edible food?</h3> 
    </div> 

CSS

.centerMe 
    { 
      position: absolute; 
      left: 50%; 
      top: 50%; 
      text-align: center; 
    } 

jQuery를 크기 조정 솔루션에 대한 당신의 JQuery와에

$(document).ready(function(){ 

     $(window).resize(function(){ 

     $('.centerMe').css({ 
      position:'absolute', 
      left: ($(window).width() 
      - $('.gap gap-100').outerWidth())/2, 
      top: ($(window).height() 
      - $('.gap gap-100').outerHeight())/2 
     }); 

     }); 

     // To initially run the function: 
     $(window).resize(); 

     }); 

Answer 1

, 당신이 당신의 텍스트 DIV의 폭을 빼줄 잊어 또한 요소를 데드 센터를 가로로 배치하려면 브라우저 너비를 2로 나누어야합니다.

$ (문서) .ready (함수() {

$(window).resize(function(){ 

    $('.centerMe').css({ 
     position:'absolute', 
     left: (($(window).width() /2) - ($('.centerMe').width()/2)), 
     top: ($(window).height() 
     - $('.gap gap-100').outerHeight())/2 
    }); 

    }); 

    // To initially run the function: 
    $(window).resize(); 

    }); 

Answer 2

여기에 대해 자세히 알아 .centerMe

.centerMe{ 

    /*text-align:center;*/ 
    -moz-transform: translate(-50%, -50%); 
    -ms-transform: translate(-50%, -50%); 
    -o-transform: translate(-50%, -50%); 
    -webkit-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%); 
} 

에 다음 CSS3 속성을 추가 http://www.w3.org/TR/css-transforms-1/

행운을!

Answer 3

절대 중심으로 CSS를 배치 할 수 있지만 절대 중심으로 지정할 div의 높이와 너비를 정의해야합니다.

HTML

<div> 
    <span>Absolute center</span> 
</div> 

CSS이 예에서

div{ 
    background: red; 
    bottom: 0; 
    height: 100px; 
    left: 0; 
    margin: auto; 
    position: absolute; 
    top: 0; 
    right: 0; 
    width: 100px; 
    display:table; 
} 

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

봐 : http://jsfiddle.net/mBBJM/4536/