Định tâm div với chiều rộng chưa biết

tôi đã div <div id="container"></div> chứa tất cả nội dung trang bao gồm tiêu đề chân trang, vvĐịnh tâm div với chiều rộng chưa biết

Vì vậy, tôi muốn tập trung này div đến trung tâm của trang web của tôi, bây giờ tôi có css này:

#page{ 
position:relative; 
margin:auto; 
width:1000px; 
}

Và nó hoạt động, nhưng vấn đề của tôi là nội dung trong div này tiếp tục thay đổi nên thay đổi chiều rộng quá, nó có thể được 1000px hoặc 10100px vì vậy tôi cần một cái gì đó giống như width:auto;, làm thế nào có thể làm một cái gì đó như thế?

Nguồn

2011-11-22 Linas

bạn có nghĩa là: http://stackoverflow.com/questions/210717/using-jquery-to-center-a-div-on-the-screen? –

@Michael Tôi không nghĩ anh ấy gặp rắc rối với việc định tâm (tiêu đề khó hiểu trong trường hợp này). Nếu bạn đọc câu hỏi, anh ấy gặp sự cố với chiều rộng của nội dung. – jadarnel27

Bạn có hỏi làm cách nào để xoay chiều ngang phần tử có chiều rộng không xác định theo chiều ngang không? – thirtydot

Xem:http://jsfiddle.net/thirtydot/rjY7F/

HTML :

<div id="container"> 
    i'm as wide as my content 
</div>

CSS:

body { 
    text-align: center; 
} 
#container { 
    text-align: left; 
    border: 1px solid red; 
    display: inline-block; 
    /* for ie6/7: */ 
    *display: inline; 
    zoom: 1; 
}

Nguồn

2011-11-22 14:47:43 thirtydot

cảm ơn nó hoạt động hoàn hảo – Linas

Brilliant. Cảm ơn bạn. –

Tôi vừa chỉnh sửa jsfiddle của bạn và xóa tất cả kiểu dáng cho '# container' và nó vẫn hoạt động. Tôi đoán 'text-align' trên' body' thực hiện thủ thuật? Đã thử nghiệm trong firefox. –

làm thế nào về điều này?

body { 
    text-align: center; 
} 
#container { 
    text-align: left; 
}

Giả sử <body><div id="container"></div></body>

Nguồn

2011-11-22 14:42:18 PiTheNumber

Một cách là tạo ra một wrapper xung quanh yếu tố #page của bạn, chúng ta hãy gọi nó #wrapper:

#wrapper { 
    position: relative; 
    left: 50%; 
    float: left; 
} 
#page { 
    position: relative; 
    left: -50%; 
    float: left; 
}

này sẽ cho phép các #page div vẫn có chiều rộng khác nhau.

Nguồn

2011-11-22 14:45:24

giải pháp tốt nhất ở đây imo – Tunarock

này sẽ cung cấp cho bạn một div dinamically cỡ mà vẫn ở trung tâm của cơ thể và là kích thước nhỏ nhất cần thiết để phù hợp với nội dung:

body { text-align: center; } 
div.container { display: inline-block; text-align: left; }

Nguồn

2011-11-22 14:47:04 Viruzzo

Định tâm div với chiều rộng chưa biết

Trả lời

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