Căn giữa văn bản "span" bên trong một div

Question

Tôi có một mã HTML là;

<div class="left"> 
<span class="panelTitleTxt">Title text</span> 
</div> 

CSS của tôi như sau;

.left { 
    background-color: #999999; 
    height: 50px; 
    width: 24.5%; 
} 
span.panelTitleTxt { 
       display: block; 
       width: 100%; 
       height: 100%; 
} 

Bây giờ làm cách nào để căn giữa căn chỉnh văn bản nhịp trong div? (Giả sử rằng div "trái" sau khi chuyển đổi% nhận được chiều rộng px là 100px)

Tôi đã thử cách tiêu chuẩn sử dụng margin:auto, nhưng điều đó không hoạt động.

Ngoài ra, tôi muốn tránh sử dụng text-align:center.

Có cách nào khác để sửa lỗi này không?

Answer 1

Bạn đang đưa khoảng cách rộng 100% khiến nó mở rộng đến kích thước của cha mẹ. Điều này có nghĩa là bạn không thể căn giữa nó, vì không có chỗ để di chuyển nó.

Bạn có thể đặt khoảng thời gian cho chiều rộng đã đặt, sau đó thêm lại margin:0 auto. Điều này sẽ căn giữa nó.

.left 
{ 
    background-color: #999999; 
    height: 50px; 
    width: 24.5%; 
} 
span.panelTitleTxt 
{ 
    display:block; 
    width:100px; 
    height: 100%; 
    margin: 0 auto; 
} 

Answer 2

Nếu bạn biết chiều rộng của khoảng bạn chỉ có thể nhồi nhét ở lề trái.

Hãy thử điều này:

.center {text-align: center}
div.center khoảng {display: table; }

Thêm "trung tâm: lớp để bạn

Nếu bạn muốn có một số nhịp làm trung tâm, nhưng không phải người khác, thay thế. 'Khoảng div.center' trong bảng phong cách của bạn đến một lớp học (ví dụ như" trung tâm -span ") và thêm lớp đó vào khoảng thời gian