Tôi sử dụng kiểu căn chỉnh văn bản css để căn chỉnh nội dung bên trong một vùng chứa trong HTML. Điều này làm việc tốt trong khi nội dung là văn bản hoặc trình duyệt là IE. Nhưng nếu không nó không hoạt động.Căn chỉnh nội dung bên trong một div
Cũng như tên cho thấy nó được sử dụng cơ bản để căn chỉnh văn bản. Thuộc tính căn chỉnh đã không còn được dùng nữa.
Có cách nào khác để căn chỉnh nội dung trong html không?
căn chỉnh văn bản căn chỉnh văn bản và nội dung nội dòng khác. Nó không điều chỉnh các phần tử khối con.
Để làm điều đó, bạn muốn cung cấp cho phần tử bạn muốn căn chỉnh chiều rộng, với lề trái và lề phải 'tự động'. Đây là cách tuân thủ tiêu chuẩn hoạt động ở mọi nơi ngoại trừ IE5.x.
<div style="width: 50%; margin: 0 auto;">Hello</div>
Để làm việc này trong IE6, bạn cần đảm bảo Standards Mode bật bằng cách sử dụng DOCTYPE phù hợp.
Nếu bạn thực sự cần hỗ trợ IE5/Quirks Mode, mà những ngày này bạn không nên thực sự, nó có thể kết hợp hai cách tiếp cận khác nhau để định tâm:
<div style="text-align: center">
<div style="width: 50%; margin: 0 auto; text-align: left">Hello</div>
</div>
(Rõ ràng, phong cách là tốt nhất đặt bên trong một kiểu, nhưng phiên bản inline là minh họa)
Nếu bạn không biết chiều rộng div, thường là như vậy, giải pháp này hoạt động hoàn hảo trong tất cả các trình duyệt: http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross -browser-support –
Chỉ cần một ví dụ sử dụng HTML và CSS:.
<div style="width: Auto; margin: 0 auto;">Hello</div>
Bạn có thể làm điều đó như cũng này:
HTML
<body>
<div id="wrapper_1">
<div id="container_1"></div>
</div>
</body>
CSS
body { width: 100%; margin: 0; padding: 0; overflow: hidden; }
#wrapper_1 { clear: left; float: left; position: relative; left: 50%; }
#container_1 { display: block; float: left; position: relative; right: 50%; }
Như Artem Russakovskii cũng đã đề cập, đọc bài viết gốc bằng Mattew James Taylor cho mô tả đầy đủ.
Thành thật mà nói, tôi ghét tất cả các giải pháp mà tôi đã thấy cho đến nay và tôi sẽ cho bạn biết lý do: Họ dường như không bao giờ chỉnh sửa đúng ... vì vậy đây là những gì tôi thường làm:
Tôi biết giá trị của từng pixel div và tỷ suất lợi nhuận tương ứng của chúng giữ ... vì vậy tôi làm như sau.
Tôi sẽ tạo div bao bọc có vị trí tuyệt đối và giá trị bên trái là 50% ... do đó div này bắt đầu ở giữa màn hình và sau đó tôi trừ một nửa tất cả nội dung của div chiều rộng ... và tôi nhận được nội dung mở rộng quy mô ... và tôi nghĩ điều này cũng hoạt động trên tất cả các trình duyệt. Hãy thử nó cho chính mình (ví dụ này giả định tất cả các nội dung trên trang web của bạn được gói trong một thẻ div có sử dụng này lớp wrapper và tất cả các nội dung trong đó là 200px chiều rộng):
.wrapper {
position: absolute;
left: 50%;
margin-left: -100px;
}
EDIT: Tôi quên để thêm .. .bạn cũng có thể muốn đặt chiều rộng: 0px; trên div trình bao bọc này cho một số trình duyệt không hiển thị các thanh cuộn, và sau đó bạn có thể sử dụng vị trí tuyệt đối cho tất cả các div bên trong.
Điều này cũng hoạt động AMAZING để sắp xếp theo chiều dọc nội dung của bạn cũng như sử dụng hàng đầu: 50% và lợi nhuận trên cùng. Chúc mừng!
Dưới đây là một kỹ thuật tôi sử dụng mà đã làm việc tốt:
<div>
<div style="display: table-cell; width: 100%"> </div>
<div style="display: table-cell; white-space: nowrap;">Something Here</div>
</div><div class="content">Hello</div>
.content {
margin-top:auto;
margin-bottom:auto;
text-align:center;
}
Mặc dù đoạn mã này có thể giải quyết được câu hỏi, [bao gồm cả giải thích] (http://meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers) thực sự giúp cải thiện chất lượng bài đăng của bạn. Hãy nhớ rằng bạn đang trả lời câu hỏi cho người đọc trong tương lai và những người đó có thể không biết lý do cho đề xuất mã của bạn. – andreas
Xin lỗi, mã trên sẽ căn chỉnh trung tâm div với nội dung gốc –
Hãy cho chúng tôi biết thêm xin vui lòng? qua mã không hoạt động trong các trình duyệt khác. – Shoban
Bạn nên đưa ra một ví dụ về đánh dấu của bạn để mọi người biết những gì bạn đang cố gắng làm. Nếu không, câu hỏi của bạn là mơ hồ. – levik