Trung tâm hình ảnh, văn bản và các yếu tố khối khi xây dựng trang web
Nếu bạn đang học cách xây dựng trang web , một trong những thủ thuật phổ biến nhất mà bạn sẽ cần phải làm chủ là cách căn giữa các mục trong cửa sổ trình duyệt. Điều này có thể có nghĩa là căn giữa một hình ảnh trên trang, hoặc nó có thể là văn bản trung tâm như tiêu đề như là một phần của thiết kế.
Cách thích hợp để thực hiện giao diện trực quan này của hình ảnh hoặc văn bản trung tâm hoặc thậm chí toàn bộ trang web của bạn là sử dụng Cascading Style Sheets (CSS) . Hầu hết các thuộc tính cho việc định tâm đã có trong CSS kể từ phiên bản 1.0 và chúng hoạt động tốt với CSS3 và các trình duyệt web hiện đại.
Giống như nhiều khía cạnh của thiết kế web, có nhiều cách để sử dụng CSS để căn giữa các phần tử trong một trang web. Chúng ta hãy xem xét một số cách khác nhau để sử dụng CSS để đạt được cái nhìn trực quan này.
Tổng quan về việc sử dụng CSS cho các phần tử trung tâm trong HTML
Trung tâm với CSS có thể là một thách thức đối với các nhà thiết kế web bắt đầu bởi vì có rất nhiều cách khác nhau để thực hiện phong cách trực quan này. Mặc dù nhiều phương pháp có thể là các nhà phát triển web tốt hoặc dày dạn biết rằng không phải tất cả các kỹ thuật đều hoạt động trên mọi phần tử, điều này có thể gây khó khăn cho các chuyên gia web mới hơn vì nhiều phương thức khác nhau có nghĩa là họ cần phải biết khi nào nên sử dụng phương pháp tiếp cận nào. Điều tốt nhất cần làm là hiểu được một vài cách tiếp cận. Khi bạn bắt đầu sử dụng chúng, bạn sẽ tìm hiểu phương thức nào hoạt động tốt nhất trong trường hợp nào.
Ở cấp độ cao, bạn có thể sử dụng CSS để:
- Văn bản trung tâm
- Căn giữa phần tử cấp khối (như phân chia)
- Căn giữa hình ảnh
- Dọc theo chiều dọc một khối hoặc hình ảnh
Nhiều (nhiều) năm trước, các nhà thiết kế web có thể sử dụng phần tử
Căn giữa văn bản với CSS
Điều dễ nhất để căn giữa trên trang web là văn bản. Chỉ có một thuộc tính phong cách mà bạn cần biết để thực hiện điều này: căn chỉnh văn bản. Lấy phong cách CSS bên dưới, ví dụ:
p.center {text-align: center; }
Với dòng CSS này, mọi đoạn văn được viết với lớp trung tâm sẽ được căn giữa theo chiều ngang bên trong phần tử cha của nó. Ví dụ, nếu đoạn nằm bên trong một bộ phận, có nghĩa là nó là một phần tử con của bộ phận đó, nó sẽ được căn giữa theo chiều ngang bên trong
Dưới đây là ví dụ về lớp này được áp dụng trong tài liệu HTML:
Văn bản này được căn giữa.
Khi căn giữa văn bản với thuộc tính căn chỉnh văn bản, hãy nhớ rằng nó sẽ được căn giữa bên trong phần tử chứa của nó và không nhất thiết tập trung vào chính toàn bộ trang đó. Cũng nên nhớ rằng văn bản được căn giữa có thể khó đọc đối với các khối nội dung lớn, vì vậy hãy sử dụng phong cách này một cách tiết kiệm. Tiêu đề và các khối văn bản nhỏ, như văn bản quảng cáo cho bài viết hoặc nội dung khác, thường dễ đọc và tốt khi căn giữa, nhưng khối văn bản lớn hơn, giống như toàn bộ bài viết, sẽ rất khó tiêu thụ nếu nội dung là trung tâm đầy đủ hợp lý. Hãy nhớ rằng, khả năng đọc luôn luôn là chìa khóa khi nói đến văn bản trang web!
Căn giữa các khối nội dung với CSS
Các khối là bất kỳ phần tử nào trên trang của bạn có chiều rộng được xác định và được thiết lập dưới dạng phần tử cấp khối. Thông thường, các khối này được tạo bằng cách sử dụng phần tử HTML
div.center {
lề: 0 tự động;
chiều rộng: 80em;
}
Tốc ký CSS này cho thuộc tính margin sẽ thiết lập lề trên và dưới với giá trị là 0, trong khi bên trái và bên phải sẽ sử dụng "auto". Điều này về cơ bản có bất kỳ không gian có sẵn và phân chia nó đều giữa hai bên của cửa sổ khung nhìn, có hiệu quả tập trung các yếu tố trên trang.
Ở đây nó được áp dụng trong HTML:
nhưng văn bản bên trong nó được căn trái.
Miễn là khối của bạn có chiều rộng được xác định, nó sẽ tập trung chính nó bên trong phần tử chứa. Văn bản chứa trong khối đó sẽ không được căn giữa bên trong nó, nhưng sẽ được căn lề trái. Đây là văn bản becaus được canh lề trái trong mặc định trong các trình duyệt web. Nếu bạn muốn văn bản được căn giữa là tốt, bạn có thể sử dụng thuộc tính căn chỉnh văn bản mà chúng tôi đã đề cập trước đó cùng với phương pháp này để căn giữa bộ phận.
Định tâm hình ảnh bằng CSS
Trong khi hầu hết các trình duyệt sẽ hiển thị hình ảnh tập trung bằng cách sử dụng cùng một thuộc tính căn chỉnh văn bản mà chúng tôi đã xem xét cho đoạn văn, bạn không nên dựa vào kỹ thuật đó vì nó không được W3C đề xuất. Vì không được khuyến nghị nên luôn có khả năng các phiên bản trình duyệt trong tương lai có thể chọn bỏ qua phương thức này.
Thay vì sử dụng căn chỉnh văn bản để căn giữa hình ảnh, bạn phải nói rõ ràng với trình duyệt rằng hình ảnh là một phần tử cấp khối. Bằng cách này, bạn có thể căn giữa nó như bất kỳ khối nào khác. Đây là CSS để thực hiện điều này:
img.center {
display: block;
margin-left: auto;
margin-right: auto;
}
Và đây là HTML cho hình ảnh mà chúng tôi muốn được căn giữa:
Bạn cũng có thể căn giữa các đối tượng bằng cách sử dụng CSS trong dòng (xem bên dưới), nhưng cách tiếp cận này KHÔNG được khuyến khích vì nó thêm kiểu trực quan vào đánh dấu HTML của bạn. Hãy nhớ rằng, chúng tôi muốn tách biệt phong cách và cấu trúc, do đó, thêm các kiểu CSS vào mã HTML của bạn với ngắt tách biệt đó và, như vậy, nó nên tránh bất cứ khi nào có thể.
Căn giữa các phần tử theo chiều dọc với CSS
Việc căn giữa các đối tượng theo chiều dọc luôn luôn là thử thách trong thiết kế web, nhưng với việc phát hành Mô-đun bố trí hộp linh hoạt CSS trong CSS3, bây giờ có một cách để làm điều đó.
Căn chỉnh dọc hoạt động tương tự như căn chỉnh ngang được bao phủ ở trên. Thuộc tính CSS được căn chỉnh theo chiều dọc với giá trị ở giữa.
.vcenter {
dọc-align: giữa;
}
Nhược điểm của phương pháp này là không phải tất cả các trình duyệt đều hỗ trợ CSS FlexBox, mặc dù ngày càng có nhiều phương pháp sắp xếp CSS mới này! Trên thực tế, tất cả các trình duyệt hiện đại hiện nay đều hỗ trợ kiểu CSS này. Điều này có nghĩa là mối quan tâm duy nhất của bạn với Flexbox sẽ là phiên bản trình duyệt cũ hơn nhiều.
Nếu bạn gặp sự cố với các trình duyệt cũ hơn, W3C khuyên bạn nên căn giữa văn bản theo chiều dọc trong vùng chứa bằng cách sử dụng phương pháp sau:
- Đặt các phần tử được căn giữa bên trong một phần tử có chứa, chẳng hạn như một div.
- Đặt chiều cao tối thiểu trên phần tử chứa.
- Khai báo rằng có chứa phần tử như một ô bảng.
- Đặt căn chỉnh theo chiều dọc thành "trung bình".
Ví dụ, đây là CSS:
.vcenter {
min-height: 12em;
display: table-cell;
dọc-align: giữa;
}
Và đây là HTML:
Văn bản này được căn giữa theo chiều dọc trong hộp.
Trung tâm theo chiều dọc và các phiên bản cũ hơn của Internet Explorer
Có một số cách để buộc Internet Explorer (IE) vào trung tâm và sau đó sử dụng các nhận xét có điều kiện để chỉ có IE thấy các kiểu, nhưng chúng có một chút tiết và xấu xí. Tin tốt lành là với quyết định gần đây của Microsoft để hỗ trợ cho các phiên bản cũ của IE, những trình duyệt không hỗ trợ này sẽ sớm được ra mắt, giúp các nhà thiết kế web dễ dàng sử dụng các cách tiếp cận bố cục hiện đại như CSS FlexBox. không chỉ tập trung, dễ dàng hơn cho tất cả các nhà thiết kế web.