6 thủ thuật CSS để căn chỉnh nội dung theo chiều dọc
Chúng ta hãy nói về căn chỉnh dọc trong CSS, hoặc chính xác hơn là làm thế nào nó không thể thực hiện được. CSS vẫn chưa cung cấp một cách chính thức để tập trung nội dung theo chiều dọc trong vùng chứa của nó. Đây là một vấn đề có thể khiến các nhà phát triển web thất vọng ở khắp mọi nơi. Nhưng đừng sợ, trong bài đăng này, chúng tôi sẽ điều hành bạn một vài thủ thuật có thể giúp bạn bắt chước hiệu ứng.
Tuy nhiên, những thủ thuật này có thể có những hạn chế và bạn có thể phải sử dụng nhiều hơn một mẹo để hoàn thành ảo ảnh. Nếu bạn biết bất kỳ mẹo nào khác, hãy cho chúng tôi biết trong các nhận xét.
1. Sử dụng định vị tuyệt đối
Thủ thuật đầu tiên chúng ta sẽ thấy ở đây sử dụng Trước tiên chúng ta sẽ đặt vị trí của phần tử container thành tương đối, sau đó chúng ta đặt vị trí phần tử con thành Để căn chỉnh nó theo chiều dọc, di chuyển vị trí phần tử con từ trên xuống, bằng một nửa chiều cao của ngăn chứa và kéo nó lên một nửa chiều rộng của phần tử con. Đây là đầu ra: Thủ thuật này là hoàn hảo khi chỉ có một yếu tố con duy nhất, nếu không thì Chuyển đổi CSS3 đã làm cho nó dễ dàng để đặt nội dung ở trung tâm. Chuyển đổi CSS3, không giống như Giả sử chúng ta có cấu trúc HTML giống như phương thức trước - một phần tử cha, một phần tử con - Hãy ghi nhớ mặc dù Chuyển đổi CSS3 sẽ không hoạt động trong Internet Explorer 8 trở xuống. Bạn có thể muốn sử dụng bất kỳ phương pháp nào khác ở đây làm dự phòng. Chúng tôi cũng có thể sử dụng Thủ thuật này phù hợp khi bạn không đặt container theo chiều rộng cố định, chỉ cần đặt chiều rộng thành Nếu bạn chỉ có một dòng nội dung văn bản trong một thùng chứa, bạn có thể căn chỉnh văn bản theo chiều dọc bằng cách sử dụng Hãy nhớ rằng thủ thuật này chỉ hoạt động với một dòng văn bản. Nếu nội dung chia thành hai hoặc nhiều dòng, khoảng cách giữa mỗi dòng sẽ như chúng tôi đã chỉ định trong Cá nhân, sử dụng Bảng CSS là thủ thuật yêu thích của tôi để áp dụng căn chỉnh dọc. Nó hoạt động trong các trình duyệt cũ như Internet Explorer 8. Phương pháp này được thực hiện bằng cách đặt hiển thị phần tử vùng chứa thành Phương pháp cuối cùng để định tâm dọc là sử dụng Flexbox. Flexbox là một mô-đun mới trong CSS3. Nó cung cấp một phương pháp đơn giản hơn để căn chỉnh nội dung. Để căn giữa nội dung theo chiều dọc trong hộp flex, chỉ cần thêm Hãy nhớ rằng Flexbox một số trình duyệt chỉ hỗ trợ tính năng partials của mô-đun Flexbox như Internet Explorer 10, Safari, 6 và Chrome 27 trở xuống. Do đó, tương tự như mẹo với CSS3 Transform, hãy đảm bảo rằng hiệu ứng giảm độc đáo trong các trình duyệt này.Chức vụ bất động sản. Bạn có hai tuyệt đối. Điều này cho phép chúng tôi tự do đặt nó trên container. tuyệt đối vị trí sẽ ảnh hưởng đến các yếu tố khác trong cùng một container.2. Sử dụng chuyển đổi CSS3
Chức vụ tài sản, sẽ không ảnh hưởng đến vị trí của các yếu tố khác trong cùng một container.50% từ đầu và sử dụng biến đổi CSS cung cấp một bản dịch của -50%. Và bạn có nó rồi đấy.3. Sử dụng đệm
đệm để tạo ra một ảo ảnh của sự liên kết dọc. Để làm như vậy, chỉ cần đặt phần đệm trên cùng và dưới cùng bằng nhau, như sau:Tự động.4. Sử dụng Chiều cao Đường
chiều cao giữa các dòng bất động sản. Đặt chiều cao giữa các dòng giá trị tương đương với chiều cao của container và bạn sẽ thấy đầu ra sau.chiều cao giữa các dòng, cho chúng ta quá nhiều khoảng trắng.5. Sử dụng bảng CSS
bàn, trong khi phần tử con sẽ được hiển thị là bảng tế bào sau đó sử dụng căn dọc thuộc tính để văn bản trung tâm theo chiều dọc.6. Sử dụng Flexbox
align-item: trung tâm; như sau, và đó là nó.
