Nội dung trang trung tâm theo chiều dọc

Tôi biết cách tôi có thể xoay ngang toàn bộ trang bằng CSS. Nhưng có cách nào để làm trung tâm theo chiều dọc trang không? Một cái gì đó như thế này ...Nội dung trang trung tâm theo chiều dọc

Example

Nguồn

2011-03-12 Pieter

Tôi hy vọng nó giúp bạn http://tutorialzine.com/2010/03/centering-div-vertically-and-horizontally/ –

Bài viết tuyệt vời ... '.className {width: 300px; chiều cao: 200px; vị trí: tuyệt đối; trái: 50%; trên cùng: 50%; lề: -100px 0 0 -150px; } 'đã làm cho tôi. Bạn có thể đăng câu trả lời này cho câu hỏi của tôi để tôi có thể chấp nhận câu hỏi đó không? – Pieter

Có một bài viết tuyệt vời trong MicroTut để làm điều đó http://tutorialzine.com/2010/03/centering-div-vertically-and-horizontally/

Định tâm với CSS:

.className{ 
    width:300px; 
    height:200px; 
    position:absolute; 
    left:50%; 
    top:50%; 
    margin:-100px 0 0 -150px; 
}

Định tâm với JQuery:

$(window).resize(function(){ 

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

}); 

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

Và bạn có thể thấy một bản demo here

Nguồn

2011-03-12 13:40:50

Bạn cũng có thể chiếm quyền điều khiển CSS của display: table và display: table-cell cho mục đích này. HTML sẽ là như thế này:

<body> 
    <div id="body"> 
     <!-- Content goes here --> 
    </div> 
</body>

Và CSS:

html, 
body { 
    width: 100%; 
    height: 100%; 
} 
html { 
    display: table; 
} 
body { 
    display: table-cell; 
    vertical-align: middle; 
}

Nếu bạn muốn định tâm ngang là tốt, sau đó thêm này:

#body { 
    max-width: 1000px; /* Or whatever makes sense for you. */ 
    margin: 0 auto; 
}

Một số sẽ gọi đây là một sự lạm dụng của CSS nhưng:

Nó sẽ hoạt động giống hệt khá nhiều ở khắp mọi nơi.
Yêu cầu đánh dấu và tạo kiểu tối thiểu.
Và căn chỉnh theo chiều dọc của CSS xứng đáng một chút lạm dụng; căn chỉnh theo chiều dọc không nên yêu cầu sự hacking, contortions, và kích thước tuyệt đối mà nó làm.

Tài liệu tham khảo:

Nguồn

2011-03-12 21:38:39

Nội dung trang trung tâm theo chiều dọc

Trả lời

Các vấn đề liên quan