display dưới dạng bảng, sau đó chúng ta có thể sử dụng thuộc tính căn chỉnh dọc trong đó (hoạt động khác nhau ở các phần tử khác nhau).

#wrapper( display: table; ) #cell( display: table-cell; Vertical-align: middle; )

thuận

• Nội dung có thể thay đổi chiều cao một cách linh hoạt (chiều cao không được xác định trong CSS).
• Nội dung không bị cắt nếu không đủ chỗ cho nó.

Nhược điểm

• Không hoạt động trong IE 7 trở xuống
• Rất nhiều thẻ lồng nhau

phương pháp thứ 2

Phương pháp này sử dụng vị trí tuyệt đối của div, với phần trên cùng được đặt thành 50% và phần lề trên trừ đi một nửa chiều cao nội dung. Điều này ngụ ý rằng đối tượng phải có chiều cao cố định, được xác định theo kiểu CSS.

Vì chiều cao được cố định nên bạn có thể đặt tràn: tự động; đối với div chứa nội dung, do đó, nếu nội dung không vừa, thanh cuộn sẽ xuất hiện.

#content ( vị trí: tuyệt đối; trên cùng: 50%; chiều cao: 240px; lề trên: -120px; /* trừ một nửa chiều cao */ )

thuận

• Hoạt động trong tất cả các trình duyệt.
• Không có sự lồng ghép không cần thiết.

Nhược điểm

• Khi không đủ dung lượng, nội dung sẽ biến mất (ví dụ: div nằm bên trong nội dung và người dùng đã thu nhỏ cửa sổ, trong trường hợp đó thanh cuộn sẽ không xuất hiện.

phương pháp thứ 3

Trong phương pháp này, chúng tôi sẽ bọc div nội dung bằng một div khác. Hãy đặt chiều cao của nó thành 50% (chiều cao: 50%;) và lề dưới bằng một nửa chiều cao (lề dưới:-contentheight;). Nội dung sẽ xóa nổi và được căn giữa.

#floater( float: left; chiều cao: 50%; lề dưới: -120px; ) #content( xóa: cả hai; chiều cao: 240px; vị trí: tương đối; )

thuận

• Hoạt động trong tất cả các trình duyệt.
• Khi không đủ dung lượng (ví dụ khi thu nhỏ cửa sổ) nội dung không bị cắt, thanh cuộn sẽ xuất hiện.

Nhược điểm

• Tôi chỉ có thể nghĩ đến một điều: một phần tử trống bổ sung đang được sử dụng.

phương pháp thứ 4.

Phương pháp này sử dụng thuộc tính vị trí: tuyệt đối;. đối với div có kích thước cố định (chiều rộng và chiều cao). Sau đó, chúng tôi đặt tọa độ của nó top:0; đáy: 0; , nhưng vì nó có chiều cao cố định nên nó không thể kéo dài và căn chỉnh vào giữa. Điều này rất giống với phương pháp nổi tiếng là căn giữa theo chiều ngang một phần tử khối có chiều rộng cố định (lề: 0 tự động;).

#content(vị trí: tuyệt đối; trên cùng: 0; dưới cùng: 0; trái: 0; phải: 0; lề: tự động; chiều cao: 240px; chiều rộng: 70%; )

thuận

• Rất đơn giản.

Nhược điểm

• Không hoạt động trong Internet Explorer
• Nội dung sẽ bị cắt mà không có thanh cuộn nếu không có đủ dung lượng trong vùng chứa.

phương pháp thứ 5

Sử dụng phương pháp này, bạn có thể căn giữa một dòng văn bản. Chúng ta chỉ cần đặt chiều cao văn bản (line-height) bằng chiều cao phần tử (height). Sau đó, dòng sẽ được hiển thị ở trung tâm.

#content( chiều cao: 100px; chiều cao dòng: 100px; )

thuận

• Hoạt động trong tất cả các trình duyệt.
• Không cắt văn bản nếu nó không phù hợp.

Nhược điểm

• Chỉ hoạt động với văn bản (không hoạt động với các phần tử khối).
• Nếu có nhiều hơn một dòng văn bản thì trông rất tệ.

Phương pháp này rất hữu ích cho các phần tử nhỏ, chẳng hạn như căn giữa văn bản trong một nút hoặc trường văn bản.

Bây giờ bạn đã biết cách căn chỉnh trung tâm theo chiều dọc, hãy tạo một trang web đơn giản có kết quả như thế này:

Bước 1

Bắt đầu bằng đánh dấu ngữ nghĩa luôn là điều tốt. Trang của chúng ta sẽ có cấu trúc như sau:

• #floater (để căn giữa nội dung)
• #centered (yếu tố trung tâm)
  • #bên
    • #Logo
    • #nav (danh sách
    • #nội dung
  • #bottom (đối với bản quyền và tất cả những thứ đó)

  Hãy viết đánh dấu html sau:

  Một công ty

  • Trang chủ
  • Các sản phẩm
  • Blog
  • Liên hệ
  • Về

  Tiêu đề trang

  Tái thiết kế toàn diện hoạt động gia công phần mềm có giá trị gia tăng sau khi cộng tác và chia sẻ ý tưởng lấy quy trình làm trung tâm. Đơn giản hóa mạnh mẽ các thị trường ngách có tác động mạnh mẽ thông qua các mệnh lệnh được kích hoạt. Sự đổi mới cao cấp chiếm ưu thế toàn diện sau các kịch bản hấp dẫn. Tiếp cận lại một cách liền mạch các tiêu chuẩn cao về nguồn nhân lực bằng các sản phẩm được sản xuất hàng đầu. Cung cấp các lược đồ tuân thủ tiêu chuẩn một cách rõ ràng trước các cơn lốc mạnh mẽ. Thu thập lại một cách độc đáo tính sẵn sàng của web được tận dụng thông tin sẵn có.

  Tiêu đề 2

  Tận dụng hiệu quả tính sẵn sàng của web tùy chỉnh thay vì các quy trình do khách hàng hướng dẫn. Quyết đoán phát triển các mệnh lệnh đa nền tảng dựa trên các công nghệ chủ động. Trao quyền thuận tiện cho các siêu dịch vụ đa ngành mà không cần giao diện toàn doanh nghiệp. Hợp lý hóa một cách thuận tiện các lĩnh vực chủ đề chiến lược cạnh tranh với các thị trường điện tử tập trung. Cung cấp chất phát quang huỳnh quang cho các cộng đồng đẳng cấp thế giới đối với các thị trường giá trị gia tăng. Tái tạo lại các dịch vụ tổng thể một cách thích hợp trước khi có các dịch vụ điện tử mạnh mẽ.

  Thông báo bản quyền ở đây

  Bước 2

  Bây giờ chúng ta sẽ viết CSS đơn giản nhất để đặt các phần tử trên trang. Bạn nên lưu mã này vào tệp style.css. Chính vì điều này mà liên kết được viết trong tệp html.

  Html, nội dung ( lề: 0; phần đệm: 0; chiều cao: 100%; ) nội dung ( nền: url("page_bg.jpg") 50% 50% không lặp lại #FC3; họ phông chữ: Georgia, Times, serifs; ) #floater ( vị trí: tương đối; float: trái; chiều cao: 50%; lề dưới: -200px; chiều rộng: 1px; ) #centered ( vị trí: tương đối; xóa: trái; chiều cao: 400px; chiều rộng: 80%; tối đa -width: 800px; min-width: 400px; lề: 0 tự động; nền: #fff; đường viền: 4px Solid #666; ) #bottom ( vị trí: tuyệt đối; đáy: 0; phải: 0; ) #nav ( vị trí: tuyệt đối; trái: 0; trên cùng: 0; dưới cùng: 0; phải: 70%; đệm: 20px; lề: 10px; ) #content ( vị trí: tuyệt đối; trái: 30%; phải: 0; trên cùng: 0; dưới cùng: 0; tràn: tự động; chiều cao: 340px; phần đệm: 20px; lề: 10px; )

  Trước khi căn chỉnh trung tâm nội dung, chúng ta cần đặt chiều cao của nội dung và html thành 100%. Vì chiều cao được tính mà không có phần đệm bên trong và bên ngoài (phần đệm và lề), nên chúng tôi đặt chúng (phần đệm) thành 0 để không có thanh cuộn.

  Lề dưới cho phần tử "floater" bằng trừ một nửa chiều cao nội dung (400px), cụ thể là -200px ;

  Trang của bạn bây giờ trông giống như thế này:

  

  #chiều rộng phần tử ở giữa là 80%. Điều này làm cho trang web của chúng tôi thu hẹp hơn trên màn hình nhỏ và rộng hơn trên màn hình lớn hơn. hầu hết các trang web trông không đứng đắn trên màn hình rộng mới ở góc trên bên trái. Các thuộc tính chiều rộng tối thiểu và chiều rộng tối đa cũng giới hạn trang của chúng tôi để nó trông không quá rộng hoặc quá hẹp. Internet Explorer không hỗ trợ các thuộc tính này. Bạn cần đặt nó ở một chiều rộng cố định.

  Vì phần tử #centered có tập hợp vị trí:tương đối nên chúng ta có thể sử dụng vị trí tuyệt đối của các phần tử bên trong nó. Sau đó đặt tràn:tự động; cho phần tử #content để thanh cuộn xuất hiện nếu nội dung không vừa.

  Bước 3

  Điều cuối cùng chúng ta sẽ làm là thêm một số kiểu dáng để làm cho trang trông hấp dẫn hơn một chút. Hãy bắt đầu với thực đơn.

  #nav ul ( list-style: none; đệm: 0; lề: 20px 0 0 0; thụt lề văn bản: 0; ) #nav li ( đệm: 0; lề: 3px; ) #nav li a ( display: block; màu nền: #e8e8e8; phần đệm: 7px; lề: 0; trang trí văn bản: không; màu: #000; viền dưới: 1px liền khối #bbb; căn chỉnh văn bản: phải; ) #nav li a::after ( nội dung: """; màu: #aaa; font-weight: đậm; hiển thị: nội tuyến; float: phải; lề: 0 2px 0 5px; ) #nav li a:hover, #nav li a:focus ( nền: # f8f8f8; border-bottom-color: #777; ) #nav li a:hover::after ( lề: 0 0 0 7px; color: #f93; ) #nav li a:active ( đệm: 8px 7px 6px 7px; )

  Điều đầu tiên chúng tôi làm để làm cho menu trông đẹp hơn là loại bỏ các dấu đầu dòng bằng cách đặt thuộc tính list-style:none, đồng thời đặt phần đệm và phần đệm, vì chúng khác nhau rất nhiều theo mặc định trong các trình duyệt khác nhau.

  Lưu ý rằng sau đó chúng tôi đã chỉ định rằng các liên kết phải được hiển thị dưới dạng phần tử khối. Bây giờ, khi được hiển thị, chúng được trải dài trên toàn bộ chiều rộng của phần tử chứa chúng.

  Một điều thú vị khác mà chúng tôi sử dụng cho menu là các lớp giả:trước và:sau. Chúng cho phép bạn thêm nội dung nào đó vào trước và sau một phần tử. Đây là một cách hay để thêm biểu tượng hoặc ký hiệu, chẳng hạn như mũi tên ở cuối mỗi liên kết. Thủ thuật này không hoạt động trong Internet Explorer 7 trở xuống.

  

  Bước 4

  Và cuối cùng nhưng không kém phần quan trọng, chúng tôi sẽ thêm một số ốc vít vào thiết kế của mình để trông đẹp hơn nữa.

  #centered ( -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; ) h1, h2, h3, h4, h5, h6 ( họ phông chữ: Helvetica, Arial, sans- serif; font-weight: normal; color: #666; ) h1 ( color: #f93; border-bottom: 1px solid #ddd; letter-spacing: -0,05em; font-weight: đậm; lề-top: 0; đệm-top: 0; ) #bottom ( đệm: 10px; cỡ chữ: 0,7em; màu: #f03; ) #logo ( cỡ chữ: 2em; căn chỉnh văn bản: giữa; màu: #999; ) #logo mạnh ( font-weight: normal; ) #logo span ( display: block; font-size: 4em; line-height: 0.7em; color: #666; ) p, h2, h3 ( line-height: 1.6em; ) a ( màu: #f03; )

  Trong các kiểu này, chúng tôi đặt các góc tròn cho phần tử #centered. Trong CSS3, điều này sẽ được thực hiện bởi thuộc tính bán kính đường viền. Điều này chưa được triển khai trong một số trình duyệt, ngoài việc sử dụng tiền tố -moz và -webkit cho Mozilla Firefox và Safari/Webkit.

  

  Khả năng tương thích

  Như bạn có thể đã đoán, nguồn gốc chính của vấn đề tương thích là Internet Explorer:

  • Phần tử #floater phải được đặt chiều rộng
  • IE 6 có thêm phần đệm xung quanh các menu

  Mọi nhà thiết kế bố cục đều thường xuyên phải đối mặt với nhu cầu căn chỉnh nội dung theo một khối: theo chiều ngang hoặc chiều dọc. Có một số bài viết hay về chủ đề này, nhưng tất cả chúng đều cung cấp nhiều lựa chọn thú vị nhưng ít thực tế, đó là lý do tại sao bạn phải dành thêm thời gian để nêu bật những điểm chính. Tôi quyết định trình bày thông tin này dưới một hình thức thuận tiện cho tôi để không phải tra google nữa.

  Căn chỉnh các khối với kích thước đã biết

  Cách dễ nhất để sử dụng CSS là căn chỉnh các khối có chiều cao đã biết (để căn chỉnh theo chiều dọc) hoặc chiều rộng (để căn chỉnh theo chiều ngang).

  Căn chỉnh bằng cách sử dụng phần đệm

  Đôi khi bạn không thể căn giữa một phần tử mà phải thêm đường viền cho phần tử đó bằng cách sử dụng " phần đệm".

  Ví dụ: có một hình ảnh 200 x 200 pixel và bạn cần căn giữa nó thành một khối 240 x 300. Chúng ta có thể đặt chiều cao và chiều rộng của khối bên ngoài = 200px và thêm 20 pixel ở trên cùng và dưới cùng , và 50 ở bên trái và bên phải.

  .example-wrapper1 ( nền : #535E73 ; chiều rộng : 200px ; chiều cao : 200px ; phần đệm : 20px 50px ; )

  Căn chỉnh các khối được định vị tuyệt đối

  Nếu khối được đặt thành " vị trí: tuyệt đối", thì nó có thể được định vị tương đối so với cha mẹ gần nhất của nó bằng "vị trí: tương đối". Điều này yêu cầu tất cả các thuộc tính (" đứng đầu","Phải","đáy","bên trái") của khối bên trong để gán cùng một giá trị, cũng như "margin: auto".

  *Có một sắc thái: Chiều rộng (chiều cao) của khối bên trong + giá trị bên trái (phải, dưới, trên) không được vượt quá kích thước của khối cha. Sẽ an toàn hơn khi gán 0 (không) cho các thuộc tính bên trái (phải, dưới, trên).

  .example-wrapper2 ( vị trí : tương đối ; chiều cao : 250px ; nền : url(space.jpg) ; ) .cat-king ( chiều rộng : 200px ; chiều cao : 200px ; vị trí : tuyệt đối ; đỉnh : 0 ; trái : 0 ; đáy : 0 ; phải : 0 ; lề : auto ; nền : url(king.png) ; )

  Căn chỉnh theo chiều ngang

  Căn chỉnh bằng cách sử dụng "text-align: center"

  Để căn chỉnh văn bản trong một khối, có một thuộc tính đặc biệt " căn chỉnh văn bản". Khi được đặt thành " trung tâm"Mỗi dòng văn bản sẽ được căn chỉnh theo chiều ngang. Đối với văn bản nhiều dòng, giải pháp này cực kỳ hiếm khi được sử dụng; tùy chọn này thường được tìm thấy để căn chỉnh các nhịp, liên kết hoặc hình ảnh.

  Tôi đã từng phải nghĩ ra một số văn bản để chỉ ra cách căn chỉnh văn bản hoạt động bằng cách sử dụng CSS, nhưng tôi không nghĩ ra điều gì thú vị. Lúc đầu, tôi quyết định sao chép một bài đồng dao dành cho trẻ em ở đâu đó, nhưng tôi nhớ rằng điều này có thể làm hỏng tính độc đáo của bài viết và những độc giả thân yêu của chúng tôi sẽ không thể tìm thấy nó trên Google. Và sau đó tôi quyết định viết đoạn này - suy cho cùng thì vấn đề không phải ở nó mà là sự thẳng hàng.

  .example-text ( text-align : center ; phần đệm : 10px ; nền : #FF90B8 ; )

  Cần lưu ý rằng thuộc tính này sẽ hoạt động không chỉ cho văn bản mà còn cho bất kỳ thành phần nội tuyến nào ("display: inline").

  Tuy nhiên, văn bản này được căn chỉnh sang trái nhưng nằm trong một khối được căn giữa so với trình bao bọc.

  .example-wrapper3 ( text-align : center ; nền : #FF90B8 ; ) .inline-text ( display : inline-block ; width : 40% ; đệm : 10px ; căn chỉnh văn bản : trái ; nền : #FFE5E5 ; )

  Căn chỉnh các khối bằng lề

  Các phần tử khối có chiều rộng đã biết có thể dễ dàng được căn chỉnh theo chiều ngang bằng cách đặt chúng thành "margin-left: auto; Margin-right: auto". Thông thường người ta sử dụng chữ viết tắt: " lề: 0 tự động" (có thể sử dụng bất kỳ giá trị nào thay vì 0). Nhưng phương pháp này không phù hợp với việc căn chỉnh theo chiều dọc.

  .lama-wrapper ( chiều cao : 200px ; nền : #F1BF88 ; ) .lama1 ( chiều cao : 200px ; chiều rộng : 200px ; nền : url(lama.jpg) ; lề : 0 tự động ; )

  Đây là cách bạn nên căn chỉnh tất cả các khối, nếu có thể (khi không yêu cầu định vị cố định hoặc tuyệt đối) - đó là cách hợp lý và đầy đủ nhất. Mặc dù điều này có vẻ hiển nhiên nhưng đôi khi tôi cũng thấy những ví dụ đáng sợ có dấu thụt âm, vì vậy tôi quyết định làm rõ.

  Căn dọc

  Căn chỉnh theo chiều dọc có nhiều vấn đề hơn - rõ ràng, điều này không được cung cấp trong CSS. Có một số cách để đạt được kết quả mong muốn, nhưng tất cả chúng đều không đẹp lắm.

  Căn chỉnh với thuộc tính chiều cao dòng

  Trong trường hợp chỉ có một dòng trong một khối, bạn có thể căn chỉnh theo chiều dọc bằng cách sử dụng " chiều cao giữa các dòng" và đặt nó ở độ cao mong muốn. Để có độ tin cậy, cũng đáng đặt "chiều cao", giá trị của nó sẽ bằng giá trị của "line-height", vì giá trị sau không được hỗ trợ trong tất cả các trình duyệt.

  .example-wrapper4 ( line-height : 100px ; color : #DC09C0 ; nền : #E5DAE1 ; Height : 100px ; text-align : center ; )

  Cũng có thể đạt được sự liên kết khối với một số dòng. Để làm điều này, bạn sẽ phải sử dụng một khối bao bọc bổ sung và đặt chiều cao dòng cho nó. Khối bên trong có thể có nhiều dòng nhưng phải là "nội tuyến". Bạn cần áp dụng "vertical-align: middle" cho nó.

  .example-wrapper5 ( line-height : 160px ; chiều cao : 160px ; font-size : 0 ; nền : #FF9B00 ; ) .example-wrapper5 .text1 ( display : inline-block ; font-size : 14px ; line-height : 1.5 ; căn chỉnh dọc : giữa ; nền : #FFFFAF2 ; màu sắc : #FF9B00 ; căn chỉnh văn bản : giữa ; )

  Khối trình bao bọc phải được đặt "font-size: 0". Nếu bạn không đặt cỡ chữ về 0, trình duyệt sẽ thêm một vài pixel phụ. Bạn cũng sẽ phải chỉ định kích thước phông chữ và chiều cao dòng cho khối bên trong, vì các thuộc tính này được kế thừa từ khối cha.

  Căn chỉnh theo chiều dọc trong bảng

  Tài sản " căn chỉnh theo chiều dọc" cũng ảnh hưởng đến các ô của bảng. Với giá trị được đặt thành "ở giữa", nội dung bên trong ô được căn chỉnh về giữa. Tất nhiên, bố cục bảng ngày nay được coi là cổ xưa, nhưng trong những trường hợp đặc biệt, bạn có thể mô phỏng nó bằng cách chỉ định " hiển thị: ô bảng".

  Tôi thường sử dụng tùy chọn này để căn chỉnh theo chiều dọc. Dưới đây là một ví dụ về bố cục được lấy từ một dự án đã hoàn thành. Hình ảnh được căn giữa theo chiều dọc theo cách này mới là điều đáng quan tâm.

  .one_product .img_wrapper ( display : ô bảng ; chiều cao : 169px ; căn chỉnh dọc : giữa ; tràn : ẩn ; nền : #fff ; chiều rộng : 255px ; ) .one_product img ( chiều cao tối đa : 169px ; chiều rộng tối đa : 100 %; chiều rộng tối thiểu: 140px; hiển thị: khối; lề: 0 tự động; )

  Cần nhớ rằng nếu một phần tử có tập "float" khác với "none", thì trong mọi trường hợp, nó sẽ là khối (hiển thị: khối) - khi đó bạn sẽ phải sử dụng một trình bao bọc khối bổ sung.

  Căn chỉnh với phần tử nội tuyến bổ sung

  Và đối với các phần tử nội tuyến, bạn có thể sử dụng " căn dọc: giữa". Hơn nữa, tất cả các phần tử có " Hiển thị nội dòng" nằm trên cùng một đường sẽ thẳng hàng với một đường trung tâm chung.

  Bạn cần tạo một khối phụ có chiều cao bằng chiều cao của khối cha, sau đó khối mong muốn sẽ được căn giữa. Để làm điều này, thật thuận tiện khi sử dụng các phần tử giả:trước hoặc:sau.

  .example-wrapper6 ( chiều cao : 300px ; căn chỉnh văn bản : giữa ; nền : #70DAF1 ; ) .pudge ( hiển thị : khối nội tuyến ; căn chỉnh dọc : giữa ; nền : url(pudge.png) ; màu nền : # fff ; chiều rộng : 200px ; chiều cao : 200px ; ) .riki ( hiển thị : khối nội tuyến ; chiều cao : 100% ; căn chỉnh dọc : giữa ; )

  Hiển thị: uốn cong và căn chỉnh

  Nếu bạn không quan tâm nhiều đến người dùng Explorer 8 hoặc quan tâm đến mức sẵn sàng chèn thêm một đoạn javascript cho họ, thì bạn có thể sử dụng "display: flex". Hộp Flex rất hữu ích trong việc giải quyết các vấn đề căn chỉnh và chỉ cần viết "margin: auto" để căn giữa nội dung bên trong.

  Cho đến nay, tôi thực tế chưa bao giờ gặp phải phương pháp này, nhưng không có hạn chế đặc biệt nào đối với nó.

  

  .example-wrapper7 ( display : flex ; chiều cao : 300px ; nền : #AEB96A ; ) .example-wrapper7 img ( lề : auto ; )

  Chà, đó là tất cả những gì tôi muốn viết về căn chỉnh CSS. Bây giờ việc căn giữa nội dung sẽ không còn là vấn đề nữa!

  Thuộc tính CSS Vertical-align chịu trách nhiệm căn chỉnh văn bản và hình ảnh theo chiều dọc trên trang. Tính năng quan trọng là nó chỉ hoạt động với các phần tử bảng, phần tử nội tuyến và khối nội tuyến. Được hỗ trợ bởi tất cả các trình duyệt hiện đại.

  Cú pháp CSS căn chỉnh theo chiều dọc

  ... căn dọc : giá trị ; ...

  • đường cơ sở - căn chỉnh theo đường cơ sở của tổ tiên (hoặc đơn giản là ranh giới dưới của cha mẹ)
  • dưới cùng - căn chỉnh về cuối dòng (hoặc phần tử nằm bên dưới tất cả)
  • ở giữa - căn chỉnh điểm giữa của phần tử với đường cơ sở của phần tử gốc cộng với một nửa chiều cao của phần tử gốc
  • sub - hiển thị xảy ra bên dưới dòng (trông giống như chỉ số dưới)
  • super - hiển thị xảy ra phía trên dòng (dưới dạng chỉ số trên)
  • text-bottom - căn chỉnh đường viền dưới cùng của phần tử với cạnh dưới cùng của dòng
  • text-top - căn chỉnh đường viền trên cùng của phần tử với cạnh trên của dòng
  • top - căn chỉnh cạnh trên của phần tử với phần trên cùng của phần tử cao nhất trong dòng
  • kế thừa - kế thừa giá trị của cha mẹ
  • giá trị - được biểu thị bằng pixel. Một số dương dịch chuyển lên trên so với đường cơ sở. Tiêu cực xuống
  • lãi suất - được biểu thị bằng tỷ lệ phần trăm. Một số dương dịch chuyển lên trên so với đường cơ sở. Tiêu cực xuống

  Giá trị căn chỉnh dọc mặc định:

  • đường cơ sở (đối với các phần tử nội tuyến)
  • giữa (đối với các ô của bảng)

  Căn chỉnh theo chiều dọc trong bảng

  Việc sử dụng căn chỉnh dọc phổ biến nhất là trong các ô của bảng. Trong thẻ

  sử dụng thuộc tính valign.

  Cú pháp CSS valign cho bảng

  Trong đó giá trị có thể nhận các giá trị sau:

  • đường cơ sở - căn chỉnh đường cơ sở của dòng văn bản đầu tiên
  • dưới cùng - căn chỉnh với cạnh dưới cùng của ô bảng
  • giữa - căn chỉnh vào giữa ô
  • top - căn chỉnh theo cạnh trên của ô

  Ví dụ:

  hoặc

  Căn chỉnh lên trên cùng

  Căn giữa

  Căn chỉnh dưới cùng

  Căn chỉnh lên trên cùng

  Căn giữa

  Căn chỉnh dưới cùng

  Ví dụ về căn chỉnh theo chiều dọc

  Ví dụ 1. Căn chỉnh các giá trị theo chiều dọc: đường cơ sở, dưới cùng, trên cùng, phụ

  
  Текст с выравниванием vert_align_baseline
  Текст с выравниванием vert_align_bottom
  Текст с выравниванием vert_align_top
  Текст с выравниванием vert_align_sub

  Пример 2. Значения vertical-align: абсолютные значения и проценты

  Ниже представлены примеры вертикального выравнивания с абсолютным значением и процентами.

  
  
  
  
  

  Преобразуется на странице в следующее:

  Исходная строка. Текст с выравниванием на 10 пикселей вверх
  Исходная строка. Текст с выравниванием на 5 пикселей вниз
  Исходная строка. Текст с выравниванием на 50% вверх
  Исходная строка. Текст с выравниванием на 30% вниз

  Примечание

  Значение vertical-align: middle не выравнивает строчный элемент по центру самого большого элемента в строке (что можно было бы ожидать). Вместо этого значение middle выравнивает элемент относительно гипотетичной строчной буквы "X" (также называемой x-высотой).

  Для обращения к vertical-align из JavaScript нужно писать следующую конструкцию:

  object.style.verticalAlign ="VALUE "

• CSS ,
• HTML

Я думаю, многие из вас, кому приходилось заниматься версткой, сталкивались с необходимостью выравнивать элементы по вертикали и знают, какие сложности возникают при выравнивании элемента по центру.

Да, для вертикального выравнивания в CSS есть специальное свойство vertical-align с множеством значений . Однако на практике оно работает совсем не так, как ожидается. Давайте попробуем в этом разобраться.


Сравним следующие подходы. Выравнивание с помощью:

• таблицы,
• отступов,
• line-height ,
• растягивания,
• отрицательного margin ,
• transform ,
• псевдоэлемента,
• flexbox .
В качестве иллюстрации рассмотрим следующий пример.



Есть два элемента div , при этом один из них вложен в другой. Дадим им соответствующие классы − outer и inner .


Задача состоит в том, чтобы выровнять внутренний элемент по центру внешнего элемента.

Для начала рассмотрим случай, когда размеры внешнего и внутреннего блока известны . Добавим внутреннему элементу правило display: inline-block , а внешнему − text-align: center и vertical-align: middle .

Нпомню, что выравнивание применяется только к элементам, которые имеют режим отображения inline или inline-block .

Зададим блокам размеры, а также фоновые цвета, чтобы видеть их границы.

Outer { width: 200px; height: 200px; text-align: center; vertical-align: middle; background-color: #ffc; } .inner { display: inline-block; width: 100px; height: 100px; background-color: #fcc; }
После применения стилей мы увидим, что внутренний блок выровнялся по горизонтали, а по вертикали нет:
http://jsfiddle.net/c1bgfffq/

Почему так произошло? Дело в том, что свойство vertical-align влияет на выравнивание самого элемента, а не его содержимого (кроме случаев, когда оно применяется к ячейкам таблицы). Поэтому применение данного свойства к внешнему элементу ничего не дало. Более того, применение этого свойства к внутреннему элементу также ничего не даст, поскольку строчные блоки (inline-block) выравниваются по вертикали относительно соседних блоков, а в нашем случае у нас один строчный блок.

Для решения данной проблемы существует несколько техник. Ниже подробнее рассмотрим каждую из них.

Выравнивание с помощью таблицы

Первое приходящее на ум решение − заменить внешний блок таблицей из одной ячейки. В этом случае выравнивание будет применяться к содержимому ячейки, то есть к внутреннему блоку.

http://jsfiddle.net/c1bgfffq/1/

Очевидный минус данного решения – с точки зрения семантики неправильно применять таблицы для выравнивания. Второй минус в том, что для создания таблицы требуется добавить еще один элемент вокруг внешнего блока.

Первый минус можно частично убрать, заменив теги table и td на div и задав табличный режим отображения в CSS.


.outer-wrapper { display: table; } .outer { display: table-cell; }
Тем не менее внешний блок все равно останется таблицей со всеми вытекающими из этого последствиями.

Выравнивание с помощью отступов

Если высоты внутреннего и внешнего блока известны, то выравнивание можно задать с помощью вертикальных отступов у внутреннего блока, используя формулу: (H outer – H inner) / 2.

Outer { height: 200px; } .inner { height: 100px; margin: 50px 0; }
http://jsfiddle.net/c1bgfffq/6/

Минус решения - оно применимо лишь в ограниченном числе случаев, когда известны высоты обоих блоков.

Выравнивание с помощью line-height

Если известно, что внутренний блок должен занимать не более одной строки текста, то можно воспользоваться свойством line-height и задать его равным высоте внешнего блока. Поскольку контент внутреннего блока не должен переноситься на вторую строку, рекомендуется также добавить правила white-space: nowrap и overflow: hidden .

Outer { height: 200px; line-height: 200px; } .inner { white-space: nowrap; overflow: hidden; }
http://jsfiddle.net/c1bgfffq/12/

Также данную технику можно применять и для выравнивания многострочного текста, если для внутреннего блока переопределить значение line-height , а также добавить правила display: inline-block и vertical-align: middle .

Outer { height: 200px; line-height: 200px; } .inner { line-height: normal; display: inline-block; vertical-align: middle; }
http://jsfiddle.net/c1bgfffq/15/

Минус данного способа заключается в том, что должна быть известна высота внешнего блока.

Выравнивание с помощью "растягивания"

Данный способ можно применять, когда высота внешнего блока неизвестна, но известна высота внутреннего.

Для этого нужно:

1. задать внешнему блоку относительное позиционирование, а внутреннему − абсолютное;
2. добавить внутреннему блоку правила top: 0 и bottom: 0 , в результате чего он растянется на всю высоту внешнего блока;
3. установить значение auto для вертикальных отступов внутреннего блока.
.outer { position: relative; } .inner { height: 100px; position: absolute; top: 0; bottom: 0; margin: auto 0; }
http://jsfiddle.net/c1bgfffq/4/

Суть этой техники заключается в том, что задание высоты для растянутого и абсолютно спозиционированного блока заставляет браузер вычислять вертикальные отступы в равном соотношении, если их значение установлено в auto .

Выравнивание с помощью отрицательного margin-top

Этот способ получил широкую известность и применяется очень часто. Как и предыдущий, он применяется, когда высота внешнего блока неизвестна, но известна высота внутреннего.

Нужно задать внешнему блоку относительное позиционирование, а внутреннему − абсолютное. Затем необходимо сдвинуть внутренний блок вниз на половину высоты внешнего блока top: 50% и поднять вверх на половину собственной высоты margin-top: -H inner / 2.

Outer { position: relative; } .inner { height: 100px; position: absolute; top: 50%; margin-top: -50px; }
http://jsfiddle.net/c1bgfffq/13/

Минус данного способа - должна быть известна высота внутреннего блока.

Выравнивание с помощью transform

Данный способ похож на предыдущий, но он может быть применен, когда высота внутреннего блока неизвестна. В этом случае вместо задания отрицательного отступа в пикселях можно воспользоваться свойством transform и поднять внутренний блок вверх с помощью функции translateY и значения -50% .

Outer { position: relative; } .inner { position: absolute; top: 50%; transform: translateY(-50%); }
http://jsfiddle.net/c1bgfffq/9/

Почему в предыдущем способе нельзя было задать значение в процентах? Так как процентные значения свойства margin вычисляются относительно родительского элемента, значение в 50% равнялось бы половине высоты внешнего блока, а нам нужно было поднять внутренний блок на половину его собственной высоты. Для этого как раз подходит свойство transform .

Минус данного способа - он не может быть применен, если внутренний блок имеет абсолютное позиционирование.

Выравнивание с помощью Flexbox

Самый современный способ вертикального выравнивания это использовать Flexible Box Layout (в народе известен как Flexbox). Данный модуль позволяет гибко управлять позиционированием элементов на странице, располагая их практически как угодно. Выравнивание по центру для Flexbox − очень простая задача.

Внешнему блоку необходимо задать display: flex , а внутреннему − margin: auto . И это все! Красиво, правда?

Outer { display: flex; width: 200px; height: 200px; } .inner { width: 100px; margin: auto; }
http://jsfiddle.net/c1bgfffq/14/

Минус данного способа − Flexbox поддерживается только современными браузерами.

Какой способ выбрать?

Нужно исходить из постановки задачи:
• Для вертикального выравнивания текста лучше использовать вертикальные отступы или свойство line-height .
• Для абсолютно позиционированных элементов с известной высотой (например, иконок) идеально подойдет способ с отрицательным свойством margin-top .
• Для более сложных случаев, когда неизвестна высота блока, нужно использовать псевдоэлемент или свойство transform .
• Ну а если вам повезло настолько, что не нужно поддерживать старые версии браузера IE, то, конечно, лучше использовать Flexbox .

Часто при вёрстке возникает потребность в вертикальном выравнивании текста в блоке. Если это нужно сделать в ячейке таблицы, то задается значение CSS-свойства vertical-align.

Но возникает резонный вопрос, нельзя ли обойтись без таблицы, без перегрузки разметки страницы лишними тегами? Ответ: «можно», но из-за плохой поддержки CSS браузером MSIE решение задачи для него будет отличаться от решения для остальных распространённых браузеров.

В качестве примера рассмотрим следующий фрагмент:





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)