“Hãy hòa nhã với những kẻ dở hơi. Ai biết được ngày sau bạn có thể phải làm việc cho một kẻ như vậy.”
Một trong những thứ quan trọng nhất của Lập trình Front end đó chính là xây dựng bố cục, căn chỉnh các phần tử để tạo ra một bố cục thống nhất, mạch lạc, thân thiện với người dùng.
Bạn đang xem: Căn chỉnh vị trí trong html
Để làm được điều đó, CSS có một số thuộc tính có thể được sử dụng để căn chỉnh các phần tử trên trang web.
1. Căn chỉnh Text
Văn bản bên trong các phần tử cấp khối (Block – element) có thể được căn chỉnh bằng cách thiết lập thuộc tính text-align đúng cách.
HTML:
Tiêu đề: Căn chỉnh văn bảnĐây là một đoạn văn bản sẽ được căn chỉnh đều 2 bên (như trong tài liệu word). Để làm như thế, chúng ta sử dụng thuộc tính text-align trong CSS và thiết lập giá trị justify cho nó (Ngoài ra còn có các giá trị khác như: left, right, center)
CSS:
h1 { text-align: center;}p { width: 300px; text-align: justify;}Kết quả chúng ta được như hình dưới đây:
Để hiểu rõ hơn về việc căn chỉnh text, vui lòng đọc lại bài viết CSS Text bạn nhé.
2. Căn giữa với thuộc tính margin
Căn giữa của phần tử cấp khối (block-level) là một trong những kỹ thuật có ý nghĩa quan trọng nhất của thuộc tính margin trong CSS.
Ví dụ: Bạn có thể căn chỉnh thẻ div (theo chiều ngang) ở giữa bằng cách thiết lập thuộc tính margin thành auto.
HTML:
Thẻ DIV này sẽ được căn giữa theo chiều ngang
CSS:
div { width: 50%; margin: 0 auto; padding: 15px; background: yellow;}Kết quả ta được như hình:
Lưu ý: Giá trị tự auto của thuộc tính margin sẽ không hoạt động trong IE 8 và các phiên bản cũ hơn, trừ khi được chỉ định.
3. Căn chỉnh sử dụng thuộc tính position
Thuộc tính postion trong CSS kết hợp với thuộc tính left, right, top và bottom có thể được sử dụng để căn chỉnh các phần tử theo khung nhìn của tài liệu hoặc phần tử cha chứa nó.
HTML:
Đoạn văn bản này được căn ở ngoài cùng bên trái
Đoạn văn bản này được căn ở ngoài cùng bên phải
CSS:
p { width: 200px; padding: 10px;}.up { background: red; position: absolute; left: 0;}.down { background: yellow; position: absolute; right: 0;}Kết quả ta được như hình:
Để tìm hiểu thêm về cách định vị với thuộc tính position, hãy xem bài viết Position trong CSS
4. Căn chỉnh với thuộc tính float
Như bạn đã được học trong bài thuộc tính Float trong CSS:
Thuộc tính float CSS có thể được sử dụng để căn chỉnh một phần tử ở bên trái (left) hoặc bên phải (right) của khối chứa nó.Do đó, nếu một phần tử được chuyển sang bên trái, nội dung sẽ chảy dọc theo bên phải của nó.
Ngược lại, nếu phần tử được đẩy sang bên phải, nội dung sẽ chảy dọc theo bên trái của nó.
HTML:
Khối được đẩy sang bên trái
Khối được đẩy sang bên phải
CSS:
div { width: 200px; padding: 10px;}div.red { float: left; background: red;}div.yellow{ float: right; background: yellow;}Ta được kết quả như hình:
5. Clear float
Một trong những điều khó hiểu nhất khi làm việc với các bố cục dựa trên float là phần tử cha tự động bị thu gọn.
Phần tử cha không tự động lớn lên để chứa các phần tử nổi.
Mặc dù, điều này không phải lúc nào cũng rõ ràng nếu phần tử cha không chứa bất kỳ hình nền hoặc đường viền trực quan nào, nhưng điều quan trọng là phải biết và phải xử lý để ngăn chặn vấn đề bố cục bị phá vỡ.
Hãy xem hình minh họa bên dưới:
Bạn có thể thấy phần tử div không tự động lớn lên để chứa các ảnh được float. Sự cố này có thể được khắc phục bằng cách clear float sau các phần tử float trong vùng chứa nhưng trước thẻ đóng của phần tử vùng chứa.
Để làm được điều này, chúng ta có 3 giải pháp:
Giải pháp #1: Float container
Cách dễ nhất để khắc phục sự cố này là áp dụng thuộc tính float cho phần tử cha chứa các phần tử float.
HTML:
Đẩy phần tử sang trái
Đẩy phần tử sang phải
CSS:
.container{ float: left; background: grey; border: 1px solid black; }p { width: 200px; margin: 10px; padding: 10px;}.red { float: left; background: red;}.yellow { float: right; background: yellow;}Kết quả ta được như hình:
Cảnh báo: Giải pháp này sẽ chỉ hoạt động trong một số trường hợp hạn chế, vì việc áp dụng float cho phần tử cha có thể tạo ra kết quả không mong muốn.
Giải pháp #2: Sử dụng phần tử DIV trống
Đây là một cách cũ nhưng là một giải pháp dễ dàng và hoạt động trên mọi trình duyệt.
HTML:
Đẩy phần tử sang trái.
Xem thêm: Từ Điển Anh Việt " Spare Là Gì, Từ Điển Anh Việt Spare
Đẩy phần tử sang phải
CSS:
.container{ background: grey; border: 1px solid black; }.clearfix { clear: both; visibility: hidden; height: 0;}p { width: 200px; margin: 10px; padding: 10px;}.red { float: left; background: red;}.yellow { float: right; background: yellow;}Kết quả ta được như hình:
Giải pháp #3: Sử dụng phần tử giả :after
Phần tử giả :after kết hợp với thuộc tính content đã được sử dụng rất rộng rãi để giải quyết các vấn đề về float.