절대 위치 항목을 중앙 정렬하는 방법

내 이미지 위에 텍스트를 절대적으로 배치하고 싶지만 중심에 있지는 않습니다. 나는 무엇인가 시도했다. 그러나 그것은 매우 이상했다. 나는 반응하는 사이트로 갈 것이지만, 그걸로는 이상하게 보이기 시작한다. 여기 내 코드가있다. 뷰포트가 너무 작은 경우절대 위치 항목을 중앙 정렬하는 방법

HTML 인해 37 %의 위쪽 및 왼쪽 오프셋 (offset)에

<div id="container"></div> 
<div class="parent"> 
    <div class="child"> 
     <h1> Richy Photography </h1> 
    </div> 
</div>

CSS

#container { 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    background-image:url(image.jpg); 
    background-size:cover; 
    background-position:50% 50%; 
    background-repeat: no-repeat; 
} 
body, html 
{ 
    height:100%; 
    width:100%; 
} 
.parent { 
    position:relative; 
    font-family: Helvetica, Arial, sans-serif; 
    width: 100%; 
    height: 100%; 
    margin:0; 
    padding:0; 
} 

.child { 
    position: absolute; 
    left:37%; 
    top:37%; 
    margin:0; 
    padding:0; 
}

출처

2014-02-18 user3219918

, 텍스트가 화면 밖으로 나타납니다.

더 쉬운 해결책은 수평과 수직으로 정렬 된 컨텐츠와 table-cell로 표시하도록 .child 요소를 설정 후, table로 표시하도록 .parent 요소를 설정하는 것입니다 :

.parent { 
    display: table; 
    height: 100%; 
    width: 100%; 
} 

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

JSFiddle demo.

이것은 IE8 이후부터 all modern browsers에서 지원됩니다.

후 배경 이미지의 상단에 표시 할 내용을 얻기 위해, 당신은 당신의 .parent 요소에게 더 높은 z-index 속성을주고 그것을 상대 위치를 부여해야합니다 :

.parent { 
    display: table; 
    height: 100%; 
    position: relative; 
    width: 100%; 
    z-index: 2; 
}

JSFiddle demo합니다.

단순히 .parent 요소에 배경을 지정하고 #container 요소를 완전히 삭제할 수 있습니다.

출처

2014-02-18 10:14:25

난 당신이 그것을 시도 할 때 – user3219918

user3219918 @ 나는 내 대답을 편집 한해야 할 때 텍스트가 표시되지 않습니다. 그것이 당신을 위해 그것을 해결해야하므로 내 업데이트 답변을 참조하십시오. –

매력처럼 작동합니다. 감사. – user3219918

당신은 와트 이제까지 당신이 원하는 폭을 변경해야 지금 당신은 또한 왼쪽 제거 할 수 있습니다 : 절대 위치 지정된 요소가 그래서 당신은 지정해야 상대적인 요소의 전체 폭을 커버하지 않는

.child { 
position: absolute; 
text-align:center; 
margin:0; 
padding:0; 
width:100%; 
}

때문에 자신과 당신이 가지고와 텍스트 정렬 사용할 수 있습니다으로 : 센터

당신은 왼쪽에 의존 할 수 live demo

출처

2014-02-18 10:19:05

뷰포트가 너무 작 으면 37 % 위쪽 및 왼쪽 오프셋으로 인해 텍스트가 화면 밖으로 표시됩니다. –

내가 할 때 정말 중심에 있지 않습니다. 아래쪽에서 위쪽보다 조금 더 많은 공간이 있습니다. 하지만 수평 적으로 괜찮습니다. – user3219918

http://jsfiddle.net/KQtYN/1/ 그 작업 fyn 형제는 모양이 있습니다 http://jsfiddle.net/KQtYN/1/ –

: 37 %; 서로 다른 화면 크기에서 요소를 가운데 맞추기 위해 시도해보십시오 left: 0; text-align: center; width: 100%; 부모가 가지고있는 크기에 상관없이 .child 요소를 중앙에 유지해야합니다.

정말 필요한 경우 : 절대; 이걸 시험해보고 그렇지 않으면 @ 제임스 도넬리가 대답 해, 타자 야.

프로젝트에 재미와 행운이 있기를 바랍니다.

출처

2014-02-18 10:26:17

왼쪽 및 오른쪽 여백을 자동으로 설정하고, 너비를 추가하고, 왼쪽 : 0을 사용합니다. 오른쪽 : 0; 작동해야합니다. 이 같은

뭔가 :

.child { 
    position: absolute; 
    top: 0; 
    width:26%; 
    margin: 0 auto; 
    left:0; 
    right:0; 
}

출처

2014-02-18 10:28:53

절대 위치 항목을 중앙 정렬하는 방법

답변

관련 문제