2012-10-11 6 views
2

main div의 중심을 어떻게 설정할 수 있습니까? 나는 여러 가지 방법을 시도 할 것이지만 그것을 할 수는 없다. 왼쪽과 오른쪽 괜찮아 보인다. 세로 위치 속성을 변경하려면 어떻게해야합니까? 나는 이것들을 시도했다 :Div 수직 정렬 문제

margin-left:auto; 
margin-right:auto; 
margin-top:auto; 
margin-bottom:auto; 

vertical-align:middle; 

이것들은 효과가 없다.

#main 
{ 
    width:1024px; 
    height:600px; 
    position:relative; 
    z-index:1; 
    margin:auto auto; 
    text-align: center; 


} 

답변

3

(아래 튜토리얼의 방법 2를 사용) 예 작업 도움이 될 수 있음 : http://jsfiddle.net/heAXR/1/

이 좋은 튜토리얼, 그것은 여러 가지 방법을 보여줍니다 콘텐츠 센터를 수직으로 배치하는 방법 : http://blog.themeforest.net/tutorials/vertical-centering-with-css/

http://douglasheriot.com/tutorials/css_vertical_centre/demo5.html

+0

안녕하세요. 나는 그것이 제게 적합하기 때문에 두 번째 방법을 시도하고 있습니다. 그러나 그것은 효과가 없습니다. 나는 한명의 div를 가지고 있고 나는 그걸 중심에 두어야한다. 나는 다른 div와 일하고 싶지 않다. 예를 들어 방법 3에는 두 개의 div가 있습니다. –

+0

다음은 하나의 div 만 필요로하는 방법 2의 예입니다. http://jsfiddle.net/heAXR/ 중심화 된 내용이 다른 div 안에 있으면 10 가지 경우) 부모 div가 위치를 갖고 있는지 확인하십시오. – kapser

+0

질문을 다시 읽으십시오. 다음은 div가 수평 및 수직 가운데에 배치 된 예입니다. http://jsfiddle.net/heAXR/1/ – kapser

0

수평 equal.You 수직으로 할 jQuery를 사용할 수있는 사업부를 정렬 margin: 0px auto; 솔루션이 있습니다 기사에서 설명한 방법 3의 여기 데모입니다.

$(document).ready(function(){ 
    var height = $(window).height(); 
    var width = $(window).width(); 
    var mainHeight = $('#main').height(); 
    var mainWidth = $('#main').width(); 
    $('#main').css({"top" : height/2 - mainHeight/2 }).css({ "left" : width/2 - mainWidth/2}); 
});