Css ngăn xếp văn bản theo chiều dọc

Ghi chú của biên tập viên. Bài đăng này được cập nhật lần cuối vào ngày 8 tháng 9 năm 2022 để cải thiện mã và cập nhật mọi thông tin lỗi thời

Quay trở lại những ngày xưa tốt đẹp, các giới hạn của CSS thậm chí còn khiến những thứ “đơn giản” như căn giữa theo chiều dọc trở thành một thách thức, với một số nhà phát triển thậm chí còn dựa vào các giải pháp JavaScript. Nó mỏng manh, rất hạn chế và luôn có một ngoại lệ khiến nó thất bại

Cho dù chúng tôi đang cố gắng căn chỉnh một biểu tượng hoặc hình ảnh bên cạnh văn bản, tạo một trong những biểu ngữ anh hùng phổ biến đó hoặc tạo lớp phủ phương thức, việc căn giữa mọi thứ trên trục dọc luôn là một cuộc đấu tranh

Nhưng CSS đã đi một chặng đường dài kể từ đó, cung cấp rất nhiều phương pháp giúp việc căn giữa theo chiều dọc trở nên dễ dàng hơn mọi lúc. Dưới đây là tóm tắt về một số trong số chúng, cùng với các trường hợp sử dụng và giới hạn của chúng

Để nhảy về phía trước trong bài viết này

• Định vị tuyệt đối và

  .container{
    position: relative;
  }
  .element{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  

  7

• .container{
    position: relative;
  }
  .element{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  

  8 cổ điển,

  .container{
    position: relative;
  }
  .element{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  

  9
• Định tâm bằng bảng
• Phương pháp phần tử ma
• Sử dụng

  .container{
    position: relative;
  }
  .element{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  

  7 trên một mục

  .container{
    display: table;
    height: 100%;
  }
  .element{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
  }
  

  1
• Phần tử giả trên vùng chứa

  .container{
    display: table;
    height: 100%;
  }
  .element{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
  }
  

  1
• Căn chỉnh trên hộp đựng

  .container{
    display: table;
    height: 100%;
  }
  .element{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
  }
  

  1 hoặc vật phẩm

  .container{
    display: table;
    height: 100%;
  }
  .element{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
  }
  

  1
• Căn chỉnh trên hộp chứa

  .container{
    display: table;
    height: 100%;
  }
  .element{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
  }
  

  5 hoặc vật phẩm

  .container{
    display: table;
    height: 100%;
  }
  .element{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
  }
  

  5
• Các phần tử giả trên lưới
• Vị trí hàng lưới rõ ràng

• .container{
    position: relative;
  }
  .element{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  

  7 trên một mục

  .container{
    display: table;
    height: 100%;
  }
  .element{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
  }
  

  5

Ghi chú bên lề. Trừ khi được nêu rõ ràng, mỗi chiến lược được đánh dấu bên dưới cũng sẽ hoạt động với các phần tử nội tuyến, điều này hợp lý khi chúng tôi sẽ trực tiếp chuyển đổi vị trí hoặc thuộc tính hiển thị của chúng

1. Định vị tuyệt đối và .container{ position: relative; } .element{ position: absolute; top: 50%; transform: translateY(-50%); } 7

Một phần tử không có kích thước nội tại có thể được căn giữa bằng cách sử dụng các giá trị bằng nhau từ trên xuống dưới. Khi một phần tử có kích thước nội tại, chúng ta có thể sử dụng

.container{
  position: relative;
}
.element{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

30 cho trên cùng và dưới cùng, sau đó áp dụng

.container{
  position: relative;
}
.element{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

7. Điều này tự động căn giữa phần tử

.container{
  position: relative;
}
.element{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

5

Chúng tôi đã thêm các kiểu bổ sung trong CodePen để làm cho bản trình diễn dễ nhìn hơn.
Tất nhiên, hạn chế là chiều cao phần tử phải được khai báo rõ ràng, nếu không nó sẽ chiếm toàn bộ vùng chứa.

2. .container{ position: relative; } .element{ position: absolute; top: 50%; transform: translateY(-50%); } 8 cổ điển, .container{ position: relative; } .element{ position: absolute; top: 50%; transform: translateY(-50%); } 9

Đây là một trong những thủ thuật đầu tiên và vẫn là thủ thuật của nhiều nhà phát triển. Bằng cách dựa vào định vị tuyệt đối, phần tử bên trong ở 50 phần trăm tính từ đỉnh phần tử gốc của chúng, sau đó chúng ta có thể dịch phần tử đó lên tới 50 phần trăm chiều cao của phần tử đó

.container{
  position: relative;
}
.element{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Một cách tiếp cận khá chắc chắn, với hạn chế lớn duy nhất là việc sử dụng bản dịch có thể cản trở các phép biến đổi khác, chẳng hạn như khi áp dụng hiệu ứng chuyển tiếp hoặc hoạt ảnh

3. Định tâm bằng bảng

Một cách tiếp cận thực sự đơn giản và là một trong những cách tiếp cận đầu tiên (trước đây, mọi thứ đều tập trung quanh các bảng), là sử dụng hành vi của các ô trong bảng và

.container{
  position: relative;
}
.element{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

34 để căn giữa một phần tử trên một vùng chứa

Điều này có thể được thực hiện với các bảng thực tế hoặc sử dụng HTML ngữ nghĩa, chuyển cách hiển thị của phần tử thành

.container{
  position: relative;
}
.element{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

35

.container{
  display: table;
  height: 100%;
}
.element{
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

Điều này hoạt động ngay cả khi cả hai yếu tố có chiều cao không xác định. Tất nhiên, hạn chế chính là nếu bạn cần có một anh chị em không phải là trung tâm, thì có thể gặp khó khăn với các giới hạn nền.

Ngoài ra, hãy nhớ rằng điều này hoàn toàn không thành công trên trình đọc màn hình (ngay cả khi đánh dấu của bạn dựa trên div, việc đặt hiển thị CSS thành

.container{
  position: relative;
}
.element{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

36 và

.container{
  position: relative;
}
.element{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

35 khiến trình đọc màn hình hiểu nó là một bảng thực tế). Vì vậy, nó không phải là tốt nhất khi nói đến khả năng tiếp cận

4. Phương pháp phần tử ma

Một cách cũ khác không theo kịp vì bất kỳ lý do gì là sử dụng

.container{
  position: relative;
}
.element{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

38 với phần tử ma (giả) có 100% chiều cao của phần tử gốc, sau đó đặt

.container{
  position: relative;
}
.element{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

39 cho cả phần tử giả và phần tử mà chúng tôi muốn căn giữa

.container{
  position: relative;
}
.element{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

3

Nó thực sự hoạt động khá tốt, với điểm nổi bật đáng chú ý nhất là nó di chuyển trung tâm nằm ngang sang bên phải một chút do hành vi luôn co rúm của khoảng trắng giữa các phần tử

.container{
  position: relative;
}
.element{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

38

Điều này có thể được giải quyết bằng cách điều chỉnh lề trên phần tử giả. Trong trường hợp của chúng tôi, chúng tôi đã chỉ định

.container{
  position: relative;
}
.element{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

81. Chúng ta cũng có thể căn giữa hoàn hảo bằng cách đặt kích thước phông chữ thành

.container{
  position: relative;
}
.element{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

30 trên vùng chứa và sau đó đặt lại thành

.container{
  position: relative;
}
.element{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

83 hoặc

.container{
  position: relative;
}
.element{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

84 trên phần tử

.container{
  position: relative;
}
.element{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

8

5. Sử dụng .container{ position: relative; } .element{ position: absolute; top: 50%; transform: translateY(-50%); } 7 trên một mục .container{ display: table; height: 100%; } .element{ display: table-cell; text-align: center; vertical-align: middle; } 1

Cuối cùng, khi bước vào lãnh thổ CSS hiện đại, Flexbox đã giới thiệu một hành vi khá tuyệt vời cho lợi nhuận

.container{
  position: relative;
}
.element{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

87. Bây giờ, nó không chỉ căn giữa một phần tử theo chiều ngang như đã làm trong bố cục khối, mà còn căn giữa nó trên trục dọc

.container{
  position: relative;
}
.element{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

6

Chiến thuật này là một trong những mục yêu thích của tôi vì tính đơn giản của nó. Hạn chế lớn duy nhất là nó sẽ chỉ hoạt động với một phần tử duy nhất

6. Phần tử giả trên vùng chứa .container{ display: table; height: 100%; } .element{ display: table-cell; text-align: center; vertical-align: middle; } 1

Không phải là cách tiếp cận thực tế nhất trên thế giới, nhưng chúng ta cũng có thể sử dụng các phần tử giả, rỗng, linh hoạt để đẩy một phần tử vào trung tâm

.container{
  position: relative;
}
.element{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

8

Điều này có thể hữu ích khi chúng ta muốn giữ khoảng cách linh hoạt trên bộ chứa flex hướng cột có nhiều mục

---

Hơn 200 nghìn nhà phát triển sử dụng LogRocket để tạo ra trải nghiệm kỹ thuật số tốt hơn

Tìm hiểu thêm →

---

7 và 8. Căn chỉnh trên hộp đựng .container{ display: table; height: 100%; } .element{ display: table-cell; text-align: center; vertical-align: middle; } 1 hoặc vật phẩm .container{ display: table; height: 100%; } .element{ display: table-cell; text-align: center; vertical-align: middle; } 1

Flexbox cũng đã giới thiệu các thuộc tính căn chỉnh thực sự tuyệt vời (hiện được chia thành mô-đun căn chỉnh hộp của riêng chúng)

Điều này cho phép chúng tôi kiểm soát cách đặt các mục và cách phân bổ không gian trống theo cách yêu cầu số ma thuật trong CSS cho một số phần tử cụ thể hoặc JavaScript thông minh cho số lượng động

Tùy thuộc vào

.container{
  position: relative;
}
.element{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

61, chúng tôi có thể sử dụng

.container{
  position: relative;
}
.element{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

62 hoặc

.container{
  position: relative;
}
.element{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

63 để điều chỉnh khi cần thiết

trên thùng chứa

.container{
  display: table;
  height: 100%;
}
.element{
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

4

Trên một mục linh hoạt cụ thể.
<

.container{
  display: table;
  height: 100%;
}
.element{
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

5

Điều này không có nhiều nhược điểm, trừ khi bạn cần hỗ trợ các trình duyệt cũ hơn. IE 11 sẽ hoạt động, nhưng việc triển khai Flexbox của nó khá nhiều lỗi, vì vậy nó phải luôn được xử lý cẩn thận

IE 10 yêu cầu công việc bổ sung có cú pháp khác và yêu cầu tiền tố nhà cung cấp

.container{
  position: relative;
}
.element{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

64

9. Sử dụng .container{ position: relative; } .element{ position: absolute; top: 50%; transform: translateY(-50%); } 34 cho các phần tử nội tuyến

Bạn cũng có thể sử dụng thuộc tính vertical-align để căn giữa các phần tử ô nội tuyến, khối nội tuyến hoặc bảng theo chiều dọc. Một trong nhiều ứng dụng của phương pháp này là căn chỉnh theo chiều dọc của hình ảnh với văn bản hoặc căn chỉnh theo chiều dọc nội dung của một ô trong bảng

.container{
  display: table;
  height: 100%;
}
.element{
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

8

CodePen Embed – Căn giữa (tại chỗ). canh dọc

Không có mô tả

liên kết CodePen. https. // codepen. io/asaoluelijah/pen/gOzgjxo

Phương pháp này không hoạt động với phần tử khối có thể là một công cụ giảm giá. Ngoài ra, nó hoạt động khá tốt và cũng được hỗ trợ bởi các trình duyệt cũ hơn

---

Các bài viết hay khác từ LogRocket

• Đừng bỏ lỡ một khoảnh khắc nào với The Replay, một bản tin được tuyển chọn từ LogRocket
• Tìm hiểu cách Galileo của LogRocket loại bỏ tiếng ồn để chủ động giải quyết các sự cố trong ứng dụng của bạn
• Sử dụng useEffect của React để tối ưu hóa hiệu suất ứng dụng của bạn
• Chuyển đổi giữa nhiều phiên bản của Node
• Khám phá cách tạo hoạt ảnh cho ứng dụng React của bạn với AnimXYZ
• Khám phá Tauri, một khuôn khổ mới để xây dựng các tệp nhị phân
• So sánh NestJS với. Thể hiện. js

---

10 và 11. Căn chỉnh trên hộp chứa .container{ display: table; height: 100%; } .element{ display: table-cell; text-align: center; vertical-align: middle; } 5 hoặc vật phẩm .container{ display: table; height: 100%; } .element{ display: table-cell; text-align: center; vertical-align: middle; } 5

Lưới CSS bao gồm khá nhiều tùy chọn căn chỉnh giống như Flexbox, vì vậy chúng ta có thể sử dụng nó trên bộ chứa

.container{
  display: table;
  height: 100%;
}
.element{
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

5

.container{
  position: relative;
}
.element{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

0

Hoặc chúng ta có thể sử dụng nó chỉ trên một mục cụ thể

.container{
  display: table;
  height: 100%;
}
.element{
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

5

.container{
  position: relative;
}
.element{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

1

Thiếu hỗ trợ trình duyệt cũ là hạn chế duy nhất của kỹ thuật này

12. Các phần tử giả trên lưới

Tương tự như giải pháp thay thế Flexbox, chúng ta có thể sử dụng lưới ba hàng với các phần tử giả

.container{
  position: relative;
}
.element{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

2

Hãy nhớ rằng

.container{
  position: relative;
}
.element{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

80 thực sự có nghĩa là

.container{
  position: relative;
}
.element{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

81, vì vậy các hàng trống sẽ không nhất thiết chiếm một phần ba chiều cao của vùng chứa. Chúng sẽ sụp đổ khi cần thiết xuống giá trị tối thiểu là ________ 287, không có nội dung, có nghĩa là ________ 130

Điều này có vẻ giống như một cách tiếp cận ngớ ngẩn, nhưng nó cho phép chúng ta dễ dàng thực hiện một trong những thủ thuật CSS Grid yêu thích của tôi. kết hợp các hàng

.container{
  position: relative;
}
.element{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

84 với các hàng

.container{
  position: relative;
}
.element{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

85, làm cho các hàng

.container{
  position: relative;
}
.element{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

84 trống bị thu gọn trước, tiếp theo là các hàng

.container{
  position: relative;
}
.element{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

87

Vì vậy, để các hàng giả lấy các hàng có thể thu gọn hoàn toàn cho phép thuật toán sắp xếp tự động phát huy tác dụng kỳ diệu của nó trên các phần tử thực tế của chúng ta, trừ khi chúng ta cần hỗ trợ IE vốn thiếu tính năng sắp xếp tự động. Điều này dẫn chúng ta đến phương pháp tiếp theo…

13. Vị trí hàng lưới rõ ràng

Lưới CSS cho phép các mục được đặt rõ ràng trên một hàng cụ thể, do đó, khai báo lưới tương tự như trên và mục được đặt trên hàng thứ hai là đủ

.container{
  position: relative;
}
.element{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

3

Điều này có thể hoạt động xuống IE10. Dù bạn có tin hay không, IE là một trong những người hỗ trợ đầu tiên và mạnh mẽ hơn cho lưới CSS, đã đưa nó trở lại vào năm 2011 với IE10. Nó có một cú pháp hoàn toàn khác, nhưng chúng ta có thể làm cho nó hoạt động

.container{
  position: relative;
}
.element{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

4

14. .container{ position: relative; } .element{ position: absolute; top: 50%; transform: translateY(-50%); } 7 trên một mục .container{ display: table; height: 100%; } .element{ display: table-cell; text-align: center; vertical-align: middle; } 5

Tương tự với Flexbox, áp dụng

.container{
  display: table;
  height: 100%;
}
.element{
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

40

.container{
  position: relative;
}
.element{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

87 trên mục

.container{
  display: table;
  height: 100%;
}
.element{
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

5 sẽ căn giữa mục đó trên cả hai trục

.container{
  position: relative;
}
.element{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

5

15. .container{ display: table; height: 100%; } .element{ display: table-cell; text-align: center; vertical-align: middle; } 5 + .container{ display: table; height: 100%; } .element{ display: table-cell; text-align: center; vertical-align: middle; } 44

Những gì tốt nhất được để dành đến sau cùng;

.container{
  position: relative;
}
.element{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

6

CodePen Embed – Căn giữa. lưới + mục địa điểm

Không có mô tả

liên kết CodePen. https. // codepen. io/asaoluelijah/pen/dyeNjYM

Tuy nhiên, thuộc tính

.container{
  display: table;
  height: 100%;
}
.element{
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

48 vẫn còn tương đối mới và hỗ trợ trình duyệt có thể là một vấn đề do nó không tương thích với các trình duyệt cũ hơn như IE11 và Chrome 4-58

Một số triển khai (có thể xảy ra) trong tương lai

Theo thông số kỹ thuật của Mô-đun căn chỉnh hộp CSS Cấp 3,

.container{
  display: table;
  height: 100%;
}
.element{
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

49 sẽ hoạt động trên trục khối của vùng chứa

.container{
  display: table;
  height: 100%;
}
.element{
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

50 và vùng chứa

.container{
  display: table;
  height: 100%;
}
.element{
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

51, vì vậy (nếu trình duyệt triển khai nó), chúng tôi sẽ có thể căn giữa nội dung của các vùng chứa đó giống như chúng tôi làm trong

.container{
  display: table;
  height: 100%;
}
.element{
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

1 hoặc

Phần kết luận

Và đó là nó. Những gì đã từng cực kỳ khó khăn giờ đây có thể đạt được bằng hàng chục cách khác nhau và tôi có thể còn thiếu một vài cách nữa. Nếu bạn biết các kỹ thuật khác, vui lòng chia sẻ chúng trong phần bình luận