Trong Firefox 'A' cho thấy ở giữa, trên Chrome/IE nó không:Simple CSS: Văn bản sẽ không tập trung vào một nút
<button type="button" style="width:24px; text-align:center; vertical-align:middle">A</button>
Lưu ý sau đây có kết quả tương tự:
<button type="button" style="width:24px;">A</button>
Edit: Bây giờ dường như được cố định trong Chrome 5.0
Kiểm tra điều này trong Chrome, bạn cần phải thêm
padding: 0px;
Cho CSS.
IE thấm nhuần của riêng mình trên các nút (nhờ Windows). Định dạng nút là gây phiền nhiễu vì nó có trên hệ điều hành và định dạng trình duyệt cụ thể. Đó là lý do tương tự bạn có thể điều chỉnh kích thước của các nút '' hoặc style trong các trình duyệt trong Safari. Bạn sẽ làm tốt để nhớ luôn sử dụng đặt lại CSS. – dclowd9901
Điều này không xảy ra với tôi. Cảm ơn bạn, đã làm việc như mong đợi cho Chrome! Mặc dù nó đã không may khiến Firefox trở thành một trung tâm nhỏ. – gbhall
Trên thực tế, nếu có ai khác có vấn đề này ở đây là bản sửa lỗi hoạt động nhất quán trên IE, FF và Chrome:
padding:0 3px 0 3px; /* Purely for IE, however doesn't affect Firefox. Chrome requires 0 */
-webkit-padding-start: 0; –
gbhall
gì về:
<input type="button" style="width:24px;" value="A"/>
Thông thường, mã của bạn nên làm việc ...
Nhưng đây là một cách để tập trung văn bản trong css:
.text
{
margin-left: auto;
margin-right: auto;
}
này đã chứng tỏ được đạn với tôi bất cứ khi nào tôi muốn tập trung văn bản với css.
Vấn đề là các nút hiển thị khác nhau trên các trình duyệt. Trong Firefox, 24px là đủ để trang trải khoảng đệm mặc định và khoảng trắng được phép cho ký tự "A" của bạn và căn giữa nó. Trong IE và Chrome, nó không, vì vậy nó mặc định giá trị tối thiểu cần thiết để bao gồm các padding trái và văn bản mà không cắt nó đi, nhưng mà không cần thêm bất kỳ chiều rộng bổ sung cho nút.
Bạn có thể tăng chiều rộng hoặc như đề xuất ở trên, thay đổi phần đệm. Nếu bạn lấy đi chiều rộng rõ ràng, nó cũng sẽ hoạt động.
Là một phương pháp brute force nữa mà tôi thấy làm việc cho tôi:
Đầu quấn văn bản bên trong nút trong một khoảng, và sau đó áp dụng css này với khoảng
var spanStyle = {
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)"
}
* trên thiết lập để tạo kiểu nội tuyến
Dường như đang hoạt động tại đây: http://jsbin.com/ohecu/. Nó có thể không nhìn trung tâm bởi vì 24px là khá nhỏ. – Joel
Tôi biết, rất tiếc là tôi cần kích thước đó. Vẫn còn dung lượng, nó hoạt động trong Firefox nhưng không có trong Chrome. – gbhall