Tự hỏi làm thế nào có thể trung tâm theo chiều ngang một DIV mà không có chiều rộng? Chắc chắn tôi không thể tìm thấy bất kỳ phương pháp làm việc trên mạng ngày hôm nay nhưng tôi đã có một ý tưởng trong tâm trí của tôi và đoán những gì? Nó hoạt động!
Tôi đã làm việc ngày hôm nay trên một trang mà trình đơn không phải là trung tâm như tôi muốn và tất cả chúng ta biết xấu xí thế nào là thêm chiều rộng vào div điều hướng (để làm trung tâm) vì trình đơn có thể thay đổi bất cứ lúc nào và bạn có thể nhận được một số công cụ khó chịu trên trang nếu có chiều rộng cố định.
Lý do bạn không thể tạo một DIV xuất hiện ở giữa trang là bởi vì một div theo mặc định đã hiển thị: block; Nếu bạn áp dụng phao: trái; DIV đang trở thành nội tuyến nhưng rõ ràng nó không thể là trung tâm kể từ khi bạn làm cho nó phao trái, phải không? Thậm chí không nghĩ đến việc đưa ra nội tuyến DIV này (hiển thị: inline;) vì không tạo ra sự khác biệt trong trường hợp của chúng tôi.
Giải pháp là khá đơn giản (con bò Holly, tôi mất một giờ để tìm ra nó!). Tất cả bạn phải làm là để quấn div đó (trong trường hợp đầu tiên một danh sách không có thứ tự) bên trong một span, span là một yếu tố nội tuyến. Chúng tôi cũng sẽ sử dụng ul và li.
Bây giờ bạn sẽ nói rằng các phần tử chặn (DIV, ul) không được phép bên trong các phần tử nội tuyến (SPAN là một phần tử nội tuyến) hoàn toàn đúng. Vâng, là bằng cách nào đó chống lại các quy tắc, Eric Meyer sẽ ghét bạn, nhưng khi bạn sẽ thấy công việc làm bạn sẽ muốn nhảy!
Thậm chí nhiều hơn, ví dụ thứ hai là dựa trên nhiều nested lồng vào DIVs, ugly nào đó nhưng như tôi đã nói là làm công việc nên chúng ta hãy quên bây giờ về đánh dấu hợp lệ (Lỗi được tìm thấy trong khi kiểm tra tài liệu này như XHTML 1.0 Transitional!).
HTML:
<div>
<span>
<ul>
<a href=”#”> <li> Giới thiệu </ li> </a>
<a href=”#”> <li> Bản quyền </ li> </a>
<a href=”#”> <li> Đối tác </ li> </a>
<a href=”#”> <li> Sản phẩm </ li> </a>
</ ul>
</ span>
</ div>
CSS:
ul {text-align: center;}
li {display: inline; đệm: 0 10px 0 0}
Làm việc trong bất kỳ trình duyệt nào!
Bạn sẽ nghĩ rằng lề: 0 tự động; sẽ làm công việc trung tâm của bạn div như mọi khi nhưng như bạn thấy nó không phải là (bạn có thể thử nó nhưng nó sẽ không!). Thay vào đó, text-align: center; (âm thanh lạ tôi biết) đang làm các trick.
Để sắp xếp chúng ta hãy nói, chỉ cần một tiêu đề bạn sẽ làm như thế này. Chắc chắn bạn có thể căn giữa bất kỳ phần tử HTML nào bạn muốn, với việc xác định chiều rộng của phần tử bạn muốn ở giữa. Bạn sẽ không tin rằng đơn giản là như thế nào:
HTML:
<div>
<span>
<ul>
<li> Đây là Tiêu đề ở giữa! </ li>
</ ul>
</ span>
</ div>
CSS:
ul {text-align: center;}
li {display: inline; đệm: 0 10px 0 0}
Làm việc trong bất kỳ trình duyệt nào!
Để canh lề một bức tranh bạn thực hiện theo cùng một cách:
HTML:
<div>
<span>
<ul>
<li> <img src = “http://www.kensfi.com/images/pict.jpg” width = “200” height = “166” />
</ li>
< / ul>
</ span>
</ div>
CSS:
ul {text-align: center;}
li {display: inline; padding: 0 10px 0 0}
span {text-align: center;}
Làm việc trong bất kỳ trình duyệt nào!
Whaaaat? Đo la tât cả hả?? Nó không thể đơn giản như vậy! Hell yeah, thật đơn giản! 🙂 Từ bây giờ, bạn có thể căn giữa bất kỳ phần tử HTML nào bạn muốn mà không nhất thiết phải xác định chiều rộng của phần tử đó.
Đây là DEMO .
Để kiểm tra trang này trong trình duyệt bất kỳ, đây là một công cụ tốt.
Giải pháp cuối cùng và sử dụng hợp lệ (X) HTML thời gian này, sử dụng thẻ trung tâm HTML thay vì span, phương pháp Sonix đề xuất trong một trong những ý kiến:
<! DOCTYPE html PUBLIC “- // W3C // DTD XHTML 1.0 Transitional // EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns = “http : //www.w3.org/1999/xhtml “>
<head>
<meta http-equiv =” Content-Type “content =” text / html; charset = utf-8 “/>
<title> Tài liệu không có tiêu đề < title>
<style type = “text / css”>
ul {text-align: center;}
li {display: inline; padding: 0 10px 0 0}
</ style>
</ head>
<body>
<div>
<center>
<ul>
<li> <img src = “http://www.kensfi.com/images/pict.jpg “width =” 200 “height =” 166 “/> </ li>
