Căn chỉnh văn bản theo chiều dọc và căn giữa CSS. Căn chỉnh các phần tử theo chiều dọc bằng CSS

Thông thường trong quá trình bố trí cần phải căn chỉnh văn bản theo chiều dọc trong một khối. Nếu việc này cần được thực hiện trong một ô của bảng thì giá trị của thuộc tính CSS căn chỉnh theo chiều dọc sẽ được đặt.

Nhưng một câu hỏi hợp lý được đặt ra: liệu có thể thực hiện mà không cần bảng mà không làm bố cục trang bị quá tải với các thẻ không cần thiết không? Câu trả lời là “bạn có thể”, nhưng do trình duyệt MSIE hỗ trợ CSS kém nên giải pháp cho vấn đề này sẽ khác với giải pháp dành cho các trình duyệt phổ biến khác.

Ví dụ, hãy xem xét đoạn sau:

Một số tiếp theo

và cố gắng căn chỉnh văn bản theo chiều dọc vào giữa khối và cạnh dưới cùng của khối.

Giải pháp của vấn đề

Các trình duyệt "đúng" (bao gồm MSIE

Hầu hết các trình duyệt hiện đại đều hỗ trợ CSS2.1, cụ thể là giá trị ô bảng cho thuộc tính display. Điều này cho chúng ta cơ hội buộc một khối văn bản xuất hiện dưới dạng một ô trong bảng và tận dụng lợi thế này để căn chỉnh văn bản theo chiều dọc:

div(
hiển thị: ô bảng;
căn dọc: giữa;
}

div(
hiển thị: ô bảng;
căn dọc: dưới cùng;
}

Internet Explorer (bao gồm phiên bản 7)

Bạn có thể giải quyết vấn đề căn chỉnh văn bản về cạnh dưới cùng của một khối trong MSIE bằng cách sử dụng định vị tuyệt đối (ở đây chúng ta sẽ cần một phần tử chuỗi được nhúng trong một khối):

div(
vị trí: tương đối;
}
khoảng div (
hiển thị: khối;
vị trí: tuyệt đối;
đáy: 0%;
trái: 0%;
chiều rộng: 100%;
}

Bộ quy tắc này cũng hoạt động trong các trình duyệt “đúng”.

Chỉ định thuộc tính

Khoảng phân chia (
hiển thị: khối;
chiều rộng: 100%;
}

không cần thiết, nhưng chúng có thể cần thiết nếu, ngoài việc căn chỉnh văn bản theo chiều dọc, bạn còn định sử dụng căn chỉnh theo chiều ngang, ví dụ: text-align: center ;.

Để căn chỉnh văn bản theo chiều dọc vào giữa khối, đoạn ban đầu vẫn sẽ phải phức tạp - chúng tôi sẽ giới thiệu một thành phần dòng khác:

Tài liệu để nghiên cứu:

Định tâm dọc trong CSS (www.jakpsatweb.cz/css/css-vertical-center-solution.html)
Định tâm dọc bằng CSS (www.student.oulu.fi/%7Elaurirai/www/css/middle/)
Căn dọc (www.cssplay.co.uk/ie/valign.html)
dọc-align:middle (cssing.org.ua/2005/07/14/vertical-align-middle/)
Một phương pháp căn chỉnh dọc khác trong CSS (cssing.org.ua/2007/04/26/another-css-valign-method)

Trong CSS, một số điều tưởng chừng đơn giản lại không dễ thực hiện. Một trong những điều này là sự liên kết, tức là. khi một phần tử cần được định vị theo một cách nhất định so với phần tử khác.

Bài viết này trình bày một số giải pháp có sẵn sẽ giúp đơn giản hóa công việc căn giữa các phần tử theo chiều ngang và/hoặc chiều dọc.

Lưu ý: Bên dưới mỗi giải pháp là danh sách các trình duyệt cho biết phiên bản mà mã CSS được chỉ định hoạt động.

CSS - Khối căn giữa

1. Căn chỉnh một khối vào giữa khối khác. Trong trường hợp này, khối thứ nhất và thứ hai có kích thước động.

...

Cha mẹ ( vị trí: tương đối; ) .child ( vị trí: tuyệt đối; bên trái: 50%; trên cùng: 50%; -webkit-transform: dịch (-50%, -50%); -moz-transform: dịch (-50% , -50%); -ms-transform: dịch(-50%, -50%); -o-transform: dịch(-50%, -50% );

Chrome 4.0+
Firefox 3.6+
Internet Explorer 9+
Opera 10.5+
Safari 3.1+

2. Căn chỉnh một khối vào giữa khối khác. Trong trường hợp này, khối thứ hai có kích thước cố định.

Cha mẹ ( vị trí: tương đối; ) .con ( vị trí: tuyệt đối; trái: 50%; trên cùng: 50%; /* chiều rộng và chiều cao của 2 khối */ chiều rộng: 500px; chiều cao: 250px; /* Giá trị được xác định tùy thuộc về kích thước của nó */ /* lề trái = - width / 2 */ lề trái: -250px; lề-top = - chiều cao / 2 */ lề-top: -125px )