문제

그래서 나는 문제에 대해 모든 것을 알고 있습니다 vertical-align: middle; 사람들이 CSS의 정렬 요소를 수직하는 데 사용한 다양한 방법. 그러나 나는 내가 일하기 위해 필요한 것에 효과가있는 것을 찾지 못했습니다.

기본적으로 내 페이지에는 하나가 있습니다 <div> 그것에, 나는 페이지의 중앙에 가로 및 수직으로 배치하고 싶다. 분명히 수평 부분은 쉽지만 수직 부분에 매달려 있습니다. 내 문제는 <div> 알려지지 않았다. 내용이 변경되므로 높이를 지정할 수 없습니다.

누구든지 나에게 팁이 있습니까? 필요한 경우 JavaScript를 기꺼이 사용하려고합니다. 감사!

도움이 되었습니까?

해결책

짧은 이야기, 당신 두 개의 div가 필요합니다 CSS 전용 수직 중심을 얻으려면.

JavaScript를 사용하면 가능합니다 하나의 div로 그것을하십시오, 그렇지만.

다른 팁

당신이 JS를 사용하지 않는다고 말했듯이, 여기에 ...

CSS 인 경우

#element {
    position: absolute;
    top: 50%;
}

그런 다음 내 친구 jQuery를 사용할 수 있습니다

$(document).ready(function() {
    var height = $('#element').height();
    $('#element').css({marginTop: '-' + (height / 2) + 'px'})

{);

이것은 테스트되지 않았지만 시작이어야합니다. 바라건대 높이 / 2가 예상대로 작동합니다. parseInt();

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top