Căn giữa div chiều rộng tự động?

Question

Tôi đang gặp rắc rối bởi vì tôi có một div Tôi muốn tập trung và những gì tôi đã thường được cho biết để làm được điều này:

width: 700px; 
margin-left: auto; 
margin-right: auto; 

những rắc rối là, này là dành cho bạn nếu muốn div được chiều rộng cố định. Tôi muốn div để điều chỉnh kích thước của nó dựa trên văn bản trong div và vẫn được căn giữa. Tôi đã thử:

width: auto; 
margin-left: auto; 
margin-right: auto; 

nhưng điều này không hiệu quả. Nó kéo dài div để lấp đầy màn hình khi tôi làm điều này.

Mọi người đều biết phải làm gì ở đây?

Answer 1

Bạn có thể muốn thử CSS display:table-cell hoặc display:table

Answer 2

EDITED:

sử dụng table, nó có thể được dễ dàng hơn để phong cách. Sau đó, thêm div vào số tr

Answer 3

cho khối hoặc nội dung chính - text-align:center; cho khối trung tâm- display:inline-block;

.center{display:inline-block;background:red} 
body{text-align:center} 

<div class="center"> 
    <p contenteditable="true">write text</p> 
</div> 

DEMO http://jsfiddle.net/RXP4F/

Content Editable MDN

Answer 4

Hãy thử cấu trúc này.

<div class="container"> 
    <div class="center_div"> 

    </div> 
</div> 



.container{ 
    float: left; 
    left: 50%; 
    position: relative; 
} 
.center_div{ 
    position: relative; 
    left: -50%; 
    float: left; 
} 

Answer 5

bạn đã thử phương pháp được hiển thị ở đây chưa? http://www.tightcss.com/centering/center_variable_width.htm

về cơ bản. đưa nội dung của bạn bên trong một nổi div đặt réo rắt phát div trong vòng một nổi div

đặt trái: 50%, vị trí tương đối trên div ngoài đặt trái: -50%, vị trí tương đối trên div bên trong

cuối cùng , tổ tất cả mọi thứ trong hơn một div với overflow: hidden

.outermost-div{ 
    background-color: blue; 
    overflow:hidden;  
} 

.inner-div{ 
    float:left; 
    left:50%; 
    background-color: yellow; 
    position: relative; 
} 

.centerthisdiv { 
    position:relative; 
    left: -50%; 
    background-color: green; 
    float:right; 
    width:auto; 
} 

đây là cuộc biểu tình jsfiddle tôi: http://jsfiddle.net/wbhyX/1/

Answer 6

.outer-container { vị trí: tương đối; còn lại: 50%; float: left; rõ ràng: cả hai; lề: 10px 0; căn chỉnh văn bản: bên trái; }

.inner-container { nền: đỏ; vị trí: tương đối; còn lại: -50%; căn chỉnh văn bản: bên trái; }

Answer 7

Căn giữa phần tử theo chiều ngang có thể hơi lạ, vì chức năng không trực quan lắm.Thực sự, bạn cần chơi trò chơi với text-align:center; và margin:auto, và bạn sẽ cần phải biết khi nào nên sử dụng trò chơi nào.

Ví dụ: nếu tôi muốn căn giữa nội dung của phần tử (văn bản thô), bao gồm các nút và đầu vào, tôi có thể sử dụng text-align:center.

.text-center { 
 
    text-align:center; 
 
}

<div class="text-center" style="border:1px dashed blue;padding:6px;" > 
 
    My contents are centered! That includes my <input placeholder="inputs" /> and my <button>buttons.</button> 
 
</div>

Nếu chúng ta thêm các yếu tố khác để chứa chúng tôi, những yếu tố sẽ có chiều rộng của họ buộc phải 100%. Điều này giúp chúng ta mô phỏng rằng nó được căn giữa bởi vì về mặt kỹ thuật, ở 100%, nó là trung tâm! Silly, phải không?

.text-center { 
 
    text-align:center; 
 
}

<div class="text-center" style="border:1px dashed blue;padding:6px;" > 
 
    My contents are centered! That includes my <input placeholder="inputs" /> and my <button>buttons.</button> 
 
    <p style="background-color:orange;width:auto" >Even though my width is explicitly defined as "auto," I still have 100% width! What gives?!</p> 
 
</div>

Nếu sở hữu chiều rộng của bạn được xác định tuy nhiên, sau đó bạn có thể sử dụng margin: auto phong cách vào trung tâm nó trong phụ huynh.

<div style="margin:auto;border:1px solid black;width:300px;" > 
 
    I am centered! 
 
</div>

Bạn cần phải xác định giải pháp tốt nhất cho bạn. Tôi ước tôi có thể giúp đỡ nhiều hơn, nhưng thật khó để biết giải pháp nào phù hợp nhất với nhu cầu của bạn khi bạn chưa cung cấp HTML cho bạn!

Dù bằng cách nào, tôi hy vọng this JSFiddle sẽ giúp mọi thứ rõ ràng!

Answer 8

Sử dụng margin: 0px auto; and display: table; Có dụ: https://jsfiddle.net/da8p4zdr/