div có màn hình: lề nội dòng 0 tự động không ở giữa

Question

<div style="display: inline-block; margin: 0 auto;"> 
    <input id="abc" type="button" value="button" /> 
</div> 

Tôi cố gắng sử dụng mã ở trên để đặt chiều rộng bằng nội dung bằng nhau, sau đó căn giữa với lề: 0 auto;

Nhưng nó không hoạt động đối với tôi trên bất kỳ trình duyệt nào. Bất kì lời đề nghị nào?

BTW, khi tôi đặt thuộc tính chiều rộng, nó hoạt động tốt.

<div style="width: 10em; margin: 0 auto;"> 
    <input id="abc" type="button" value="button" /> 
</div> 

Answer 1

display: table; sẽ vị trí của nó ở trung tâm quá:

CSS:

.button{ 
    display: table; 
    margin: 0 auto; 
    } 

HTML:

<div class="button"> 
<input id="abc" type="button" value="button" /> 
< /div> 

Lưu ý: Sử dụng các kiểu inline là một thói quen xấu.

Answer 2

Kể từ khi bạn yêu cầu DIV là inline-block, text-align: center; là câu trả lời.

<div style="text-align: center;"> 
<div style="display: inline-block; text-align: left;"> 
    <input id="abc" type="button" value="button" /> 
</div> 
</div> 

Answer 3

Hãy thử

body {text-align: center;}