Div theo chiều ngang và giữa theo chiều dọc

Tôi muốn căn chỉnh giữa một tâm nằm ngang và dọc theo chiều dọc của body của một trang.Div theo chiều ngang và giữa theo chiều dọc

Các css:

.loginBody { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    background: #999; /* for non-css3 browsers */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */ 
    background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */ 
    background: -moz-linear-gradient(top, #ccc, #000); /* for firefox 3.6+ */ 
} 
.loginDiv { 
    position: absolute; 
    left: 35%; 
    top: 35%; 
    text-align: center;   
    background-image: url('Images/loginBox.png'); 
    width:546px; 
    height:265px; 
}

Và tôi có html này:

<body class="loginBody"> 
    <form id="form1"> 
    <div class="loginDiv"> 

    </div> 
    </form> 
</body>

Bây giờ nó là hành xử như tôi muốn nó, nhưng nếu tôi thay đổi kích thước trình duyệt, nó trở nên hoàn toàn bị bóp méo, có lẽ điều này là do vị trí tuyệt đối. Tôi thấy một số ảnh chụp màn hình: trong thay đổi kích cỡ firefox: enter image description here

trong thay đổi kích cỡ chrome: enter image description here

trong tức là thay đổi kích cỡ: enter image description here

trong cửa sổ tối đa hóa đó là: enter image description here

Có cách nào để giải quyết vấn đề này và đạt được sự căn chỉnh trung tâm này bằng cách sử dụng vị trí tương đối không?

Cảm ơn.

Edit:

Trong firefox không thanh cuộn xuất hiện trong khi thay đổi kích thước nhưng nó xuất hiện trong các trình duyệt khác. enter image description here

Nguồn

2012-03-11 Tapas Bose

Hãy thử điều này:

.loginDiv { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    text-align: center;   
    background-image: url('Images/loginBox.png'); 
    width:546px; 
    height:265px; 
    margin-left: -273px; /*half width*/ 
    margin-top: -132px; /*half height*/ 
}

Bạn di chuyển nó đến trung tâm, và hơn lại sang trái và lên bằng một nửa kích thước - đó sẽ tập trung nó ngay cả trên thay đổi kích thước

Nguồn

2012-03-11 15:47:22 StilgarBF

Nhờ sự giúp đỡ. nó đang làm việc nhưng có một vấn đề trong firefox th ere không có thanh cuộn trong khi thay đổi kích thước nhưng nó hiện diện trong các trình duyệt khác. Tôi đã cập nhật câu hỏi của mình. Hãy nhìn vào nó. –

nếu bạn không muốn thanh cuộn - chỉ cần thêm 'overflow: hidden' vào nội dung – StilgarBF

không, tôi muốn thanh cuộn, vì vậy tôi đặt' overflow: auto' trong cơ thể nhưng vẫn không có thanh cuộn như được mô tả. –

#div { 
    height: 200px; 
    width: 100px; 
    position:absolute; 
    top: 50%; 
    left: 50%; 
    margin-top: -100px; 
    margin-left: -50px; 
}

Đây là một phương pháp phổ biến để căn giữa div. Bạn đặt nó hoàn toàn, sau đó di chuyển nó một nửa trên và một nửa xuống. Sau đó điều chỉnh vị trí với lề bằng một nửa kích thước của div bạn đang định vị.

Để tham khảo (này sử dụng định vị cố định mặc dù để giữ div tại chỗ ngay cả khi di chuyển, hữu ích khi thực hiện popup modal .. http://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/

Nguồn

2012-03-11 15:47:29 Greg

Cảm ơn bạn đã trợ giúp. nó bây giờ là làm việc nhưng một trong những vấn đề trong firefox không có thanh cuộn trong khi thay đổi kích thước nhưng nó có mặt trong các trình duyệt khác. Tôi đã cập nhật câu hỏi của mình. Hãy nhìn vào nó. –

http://jsfiddle.net/mAVd6/2/ điều này về cơ bản có phản ánh cách trang của bạn được xây dựng không? Nó có tạo thanh cuộn trong Firefox không? các trình duyệt khác? - nếu bạn trao đổi tuyệt đối với cố định những gì xảy ra với các thanh cuộn? – Greg

Nếu tôi thay đổi vị trí thành tuyệt đối thành cố định thì không có thanh cuộn xuất hiện trong bất kỳ trình duyệt nào. –

Thực hiện một div đó là về nội dung của trang và thực hiện một " nội dung" class với css sau. Điều này làm việc cho tôi trên jquery Mobile với PhoneGap cho các thiết bị Android. Hy vọng nó sẽ giúp một ai đó.

CSS

.content { 

     width: 100%; 
     height: 100%; 
     top: 25%; 
     left: 25% 
     right: 25%; 
     text-align: center; 
     position: fixed; 
}

Nguồn

2012-08-07 17:49:06

Div theo chiều ngang và giữa theo chiều dọc

Trả lời

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