2010-04-12 34 views
26

Gần đây, một khách hàng đã yêu cầu trang web của mình dựa trên phần trăm thay vì dựa trên pixel. Phần trăm được đặt thành 80%. Như các bạn đã biết, rất dễ dàng để tập trung container nếu nó dựa trên pixel nhưng làm thế nào để bạn tập trung vào một container chính dựa trên phần trăm?Định tâm một div dựa trên phần trăm

#container 
{ 
    width:80%; 
    margin:0px auto; 
} 

Điều đó không tập trung container :(

+0

Vì vậy, chỉ cho cười, bạn có thể giải thích khách hàng của bạn lý luận cho việc muốn bố trí dựa trên phần trăm? –

+6

@Kyle: có thể hỗ trợ nhiều kích thước màn hình khác nhau, nơi bố cục dựa trên pixel có thể để lại nhiều không gian trên màn hình rộng và cuộn ngang nhiều trên màn hình nhỏ hơn như điện thoại. – GSto

+0

@GSto: đã đồng ý và đó là điểm của khách hàng. – Sarfraz

Trả lời

60

Thuộc tính lợi nhuận hỗ trợ giá trị phần trăm:

margin-left: 10%; 
margin-right: 10%; 
+2

Tôi không thể tin được, làm thế nào tôi có thể bỏ lỡ những điều đơn giản như vậy !! Cảm ơn anyways :) – Sarfraz

+9

Thậm chí ngắn hơn: 'margin: 0 10%'. :-) –

0

Tôi biết điều đó nghe có vẻ điên rồ nhưng làm thế nào về việc chiều rộng trong jQuery sau đó cài đặt lại nó để nó là một giá trị pixel?

Hoặc dựa chiều rộng ? off the chiều rộng trang trong jQuery

nó khá lạ anh ta muốn một phần trăm dựa bố trí

Oh và cuối cùng nhưng không kém, hai 10% divs chiều rộng xung quanh nó;).

+0

.containerLeft { chiều rộng: 10%; float: left; } .vùng chứa { chiều rộng: 80%; float: left; } .containerRight { chiều rộng: 10%; float: left; } –

9
#container 
{ 
    width:80%; 
    position:absolute; 
    margin-left:-40%; 
    left:50%; 
} 

hoặc đơn giản là

#container 
{ 
    width:80%; 
    margin-left:10%; 
} 
1

Tháo giá trị px ở bên lề, chỉ cần như thế này:

#container { width: 80%; margin: 0 auto; } 
+0

Không phải là 0px và 0 chính xác điều tương tự? Từ những gì tôi biết, nó không tạo ra sự khác biệt. –

+0

Nó khác trong một số trình duyệt, mã đó đang hoạt động cho tôi trong Chrome, Safari và FireFox (tất cả trên OSX) Đây là mã thử nghiệm của tôi: http://dl.dropbox.com/u/155873/centering.html – Adirael

0

Điều đó không làm trung tâm vùng chứa: (

Hoạt động hoàn hảo cho tôi.

Hãy chắc chắn rằng bạn đang ở trong Tiêu chuẩn Chế độ, vv

Full mã không làm việc?

0
#container { width: 80%; margin: 0 auto; position relative; } 

Và phụ huynh yếu tố của "container" phải vị trí tương đối hoặc tuyệt đối

ví dụ:

body{position:relative;} 
#container { width: 80%; margin: 0 auto; position relative; } 
0
position: absolute; 
width: 80%; 
left: 0; 
right: 0; 
margin: 0 auto; 
Các vấn đề liên quan