Căn chỉnh theo chiều ngang và chiều dọc của khối css. Căn chỉnh theo chiều ngang và chiều dọc của các phần tử

Vấn đề căn giữa các phần tử theo chiều dọc trong CSS có một số giải pháp có sẵn. Việc lựa chọn phương pháp căn chỉnh trong từng trường hợp riêng lẻ phụ thuộc vào loại, kích thước, vị trí của các phần tử và các thuộc tính khác được chỉ định cho chúng.

Dưới đây là một số kỹ thuật căn chỉnh dọc phổ biến trong số các nhà thiết kế bố cục. Nó cho thấy cách chúng hoạt động và trong trường hợp nào thì chúng phù hợp nhất.

Đây là hai phần tử div:

Mỗi phương pháp sẽ được sử dụng để căn chỉnh dàn lạnh với tâm của dàn nóng.

chiều cao dòng cho một dòng

Khi phần tử cha chiếm một dòng văn bản và đã biết chiều cao của phần tử con, thuộc tính line-height có thể được áp dụng. Giá trị thuộc tính phải bằng chiều cao của khối bên ngoài. Điều này chỉ hoạt động trên một dòng, vì vậy sẽ rất hữu ích nếu thêm tràn: ẩn và khoảng trắng: nowrap cho trẻ.

Sẽ không thể sử dụng ký hiệu phần trăm line-height=100%, vì 100% trong trường hợp này là chiều cao phông chữ.

Thùng đựng hàng (
chiều cao: 300px;
chiều cao dòng: 300px;
}

Bên trong(
khoảng trắng: nowrap;
tràn: ẩn;
}

Phương pháp này chỉ có thể áp dụng nếu biết chiều cao của khối bên ngoài.

Bảng được căn chỉnh theo chiều dọc

Một bảng là lý tưởng cho việc căn chỉnh các phần tử theo chiều dọc. Để không vi phạm ngữ nghĩa, tốt hơn hết bạn nên tạo các thành phần bảng bằng CSS. Vị trí của nội dung trong ô được điều khiển bằng cách căn chỉnh theo chiều dọc. Có bốn giá trị cho thuộc tính này trong bảng:

Đường cơ sở - mặc định;
. đáy - nội dung ở cuối ô;
. giữa - nội dung ở giữa ô;
. top - nội dung ở đầu ô.

Trong ví dụ đầu tiên, một ô của bảng sẽ trở thành khối bên ngoài.

Thùng đựng hàng (
hiển thị: ô bảng;
căn dọc: giữa;
}

Điểm hay của phương pháp này là nó hoạt động với các phần tử không có chiều cao nhất định, nhưng trong một số trường hợp, việc sử dụng nó bị cản trở bởi thực tế là khối bên ngoài, giống như bất kỳ ô nào trong bảng, điều chỉnh độ rộng của nó cho phù hợp với nội dung của nó và bạn có thể kéo dài nó chỉ bằng cách thiết lập rõ ràng chiều rộng cho chiều rộng. Đối với một ô không có bảng, tỷ lệ phần trăm không hoạt động đầy đủ.

Thiếu sót này được khắc phục bằng cách gói ô trong ô mẹ của nó bằng thuộc tính display:table. Kích thước của phần tử này có thể được đặt dưới dạng phần trăm. Mã cuối cùng sẽ trông như thế này:

Bao bọc bên ngoài (
hiển thị: bảng;
}

Thùng đựng hàng (
hiển thị: ô bảng;
căn dọc: giữa;
}

Vị trí: biên độ tuyệt đối + âm

Phương thức này được sử dụng khi biết chiều cao của phần tử bên trong. Nó có thể không được biết đến bởi đơn vị bên ngoài. Cha mẹ được định vị tương đối và đứa trẻ bên trong nó được định vị tuyệt đối.

Giá trị thuộc tính top là 50% làm cho phần tử lồng nhau được định vị với cạnh trên của nó ở giữa khối bên ngoài. Tất cả những gì còn lại là nâng phần lề âm của nó lên một nửa chiều cao của chính nó để nó đứng chính xác ở giữa của chiều dọc.

Thùng đựng hàng (
vị trí: tương đối;
}

Bên trong(
chiều cao: 140px;
vị trí: tuyệt đối;
trên cùng: 50%;
lề trên: -70px;
}

Nhược điểm của phương pháp này là cần biết chiều cao của trẻ.

Căn chỉnh theo chiều dọc

Việc căn chỉnh các phần tử nội tuyến và khối nội tuyến, bao gồm hình ảnh và biểu tượng, trong văn bản xung quanh được thực hiện bằng thuộc tính căn chỉnh dọc. Không giống như bảng, trong trường hợp này toàn bộ tập hợp các giá trị được chỉ định trong đặc tả sẽ hoạt động.

Nếu biết chiều cao của phần tử gốc, thuộc tính này có thể được sử dụng để căn giữa văn bản nhiều dòng.

Đối với khối bên ngoài quy định căn giữa một đường.

Thùng đựng hàng (
chiều cao: 140px;
chiều cao dòng: 140px;
}

Giá trị chiều cao dòng cho khối bên trong được xác định lại thành giá trị bình thường hoặc bất kỳ giá trị mong muốn nào. Nó cũng được cung cấp căn chỉnh theo chiều dọc: giữa và chuyển đổi thành loại khối nội tuyến - hiển thị: khối nội tuyến.

Bên trong(
hiển thị: khối nội tuyến;
chiều cao dòng: bình thường;
căn dọc: giữa;
}

Nhược điểm của phương pháp này là bạn cần biết chiều cao của cha mẹ.

Căn chỉnh với biến đổi

Hàm dịch Y của thuộc tính biến đổi cho phép bạn căn giữa khối bên trong có chiều cao không xác định. Để làm được điều này, cha mẹ phải được định vị tương đối và con tuyệt đối.

Thuộc tính top có giá trị 50% sẽ hạ thấp khối bên trong sao cho cạnh trên của nó được đặt ở giữa khối mẹ của nó. Giá trị dịchY: -50% nâng phần tử lên một nửa chiều cao của chính nó và do đó căn chỉnh tâm dọc của các khối.

Thùng đựng hàng (
vị trí: tương đối;
}

Bên trong(
vị trí: tuyệt đối;
trên cùng: 50%;
biến đổi: dịchY(-50%);
}

Nhược điểm của kỹ thuật này là khả năng hỗ trợ hạn chế cho các chức năng chuyển đổi trong trình duyệt IE.

Căn chỉnh thông qua phần tử giả

Phương thức này hoạt động khi không xác định được chiều cao của khối thứ nhất và khối thứ hai. Phần tử giả khối nội tuyến được thêm vào bên trong phần tử gốc bằng cách sử dụng trước hoặc sau. Chiều cao của phần tử được thêm vào phải bằng chiều cao của phần tử gốc - chiều cao: 100%. Căn chỉnh theo chiều dọc của nội dung được đặt bằng cách sử dụng Vertical-align: middle.

Sử dụng căn chỉnh dọc: giữa, khối bên trong được căn chỉnh tương ứng với phần tử giả này. Vì phần tử cha và phần tử con có cùng chiều cao nên phần tử bên trong tuy được căn chỉnh theo chiều dọc với phần tử giả nhưng cũng được căn giữa với hộp bên ngoài.

Vùng chứa: trước (
nội dung: "";
chiều cao: 100%;
căn dọc: giữa;
hiển thị: khối nội tuyến;
}

Bên trong(
hiển thị: khối nội tuyến;
căn dọc: giữa;
}

Cách phổ quát. Không hoạt động nếu dàn lạnh được đặt ở vị trí tuyệt đối.

Flexbox

Cách mới nhất và dễ dàng nhất để căn chỉnh các phần tử theo chiều dọc. Flexbox cho phép bạn sắp xếp các thành phần của trang Web theo ý muốn. Để căn giữa một khối, bạn chỉ cần đặt display: flex cho khối cha và lề: auto cho khối con.

Thùng đựng hàng (
hiển thị: linh hoạt;
chiều rộng: 320px;
chiều cao: 140px;
}

Bên trong(
chiều rộng: 120px;
lề: tự động;
}

Flexbox chỉ hoạt động trong các trình duyệt hiện đại.

Lựa chọn một phương pháp

Việc sử dụng kỹ thuật căn chỉnh dọc nào sẽ tùy thuộc vào nhiệm vụ và những hạn chế có thể xuất hiện trong bất kỳ trường hợp cụ thể nào.

Chiều cao của các phần tử không xác định

Trong tình huống này, bạn có thể sử dụng một trong bốn phương pháp phổ biến:

1. Bảng. Cha mẹ trở thành một ô bảng được tạo bằng HTML hoặc thông qua bảng hiển thị/ô hiển thị. Phần tử cha này được cung cấp theo chiều dọc: giữa.

2. Phần tử giả. Đối với khối bên ngoài, phần tử giả khối nội tuyến được tạo với chiều rộng=100% và căn chỉnh dọc: giữa. Đứa trẻ được hiển thị: khối nội tuyến và căn chỉnh dọc: giữa. Phương pháp này không chỉ hoạt động khi khối bên trong được định vị tuyệt đối.

3. Biến đổi. Cha mẹ nhận được vị trí: tương đối. Đứa trẻ được cho vị trí: tuyệt đối, trên cùng: 50% và biến đổi: dịchY(-50%);

4. Hộp linh hoạt. Khối bên ngoài được đặt thành display: flex, khối bên trong được cấp lề: auto.

Chỉ có chiều cao của đứa trẻ được biết

Bộ phận bên ngoài được định vị tương đối; Phần tử bên trong được định vị tuyệt đối, trên cùng: 50% và lề trên bằng một nửa chiều cao của nó.

Một dòng trên mỗi khối với chiều cao đã biết

Khối bên ngoài được cấp một thuộc tính chiều cao dòng có giá trị bằng chiều cao của nó.

Chiều cao của khối bên ngoài được biết nhưng phần tử bên trong thì không.

Phần cha mẹ được cấp một chiều cao dòng bằng với chiều cao của nó. Giá trị chiều cao dòng của trẻ được xác định lại thành giá trị bình thường hoặc bất kỳ giá trị mong muốn nào và hiển thị: khối nội tuyến và căn chỉnh dọc: giữa được cấp cho nó.

Việc căn chỉnh các phần tử theo chiều ngang và chiều dọc có thể được thực hiện theo nhiều cách khác nhau. Việc lựa chọn phương pháp phụ thuộc vào loại phần tử (khối hoặc nội tuyến), loại vị trí, kích thước, v.v.

1. Căn ngang vào giữa khối/trang 1.1. Nếu khối có chiều rộng: div ( width: 300px; lề: 0 auto; /*căn giữa phần tử theo chiều ngang trong khối cha*/ )

Nếu bạn muốn căn chỉnh một phần tử nội tuyến theo cách này, nó cần được đặt thành display: block;

1.2. Nếu một khối được lồng trong một khối khác và không có/chỉ định chiều rộng: .wrapper (text-align: center;) 1.3. Nếu chiều rộng của khối được đặt và bạn cần cố định nó ở giữa khối cha: .wrapper (vị trí: tương đối; /* đặt vị trí tương đối cho khối cha để sau đó chúng ta có thể định vị tuyệt đối khối bên trong nó * /) .box ( width: 400px; vị trí: tuyệt đối ; left: 50%; lề trái: -200px; /*chuyển khối sang trái một khoảng bằng một nửa chiều rộng của nó*/ ) 1.4. Nếu các khối không có chiều rộng được chỉ định, bạn có thể căn giữa chúng bằng cách sử dụng khối bao bọc chính: .wrapper (text-align: center; /*center nội dung của khối*/) .box ( display: inline-block; / *sắp xếp các khối thành một hàng theo chiều ngang*/ Margin-right: -0.25em; /*xóa lề phải giữa các khối*/ ) 2. Căn dọc 2.1. Nếu văn bản chiếm một dòng, ví dụ: đối với các nút và mục menu: .button ( Height: 50px; line-height: 50px; ) 2.2. Để căn chỉnh một khối theo chiều dọc bên trong khối cha: .wrapper (vị trí: tương đối;) .box ( chiều cao: 100px; vị trí: tuyệt đối; trên cùng: 50%; lề: -50px 0 0 0; ) 2.3. Căn dọc theo loại bảng: .wrapper ( display: table; width: 100%; ) .box ( display: table-cell; Height: 100px; text-align: center; Vertical-align: middle; ) 2.4. Nếu một hộp có chiều rộng và chiều cao và cần được căn giữa vào hộp mẹ của nó: .wrapper ( vị trí: tương đối; ) .box ( chiều cao: 100px; chiều rộng: 100px; vị trí: tuyệt đối; trên cùng: 0; phải: 0; dưới cùng : 0; trái: 0; lề: auto; tràn: auto; /*để nội dung không bị tràn ra*/ ) 2.5. Định vị tuyệt đối ở giữa trang/khối bằng cách sử dụng phép chuyển đổi CSS3:

nếu kích thước được chỉ định cho phần tử

div ( width: 300px; /*đặt chiều rộng của khối*/ Height:100px; /*đặt chiều cao của khối*/ Transform: Translate(-50%, -50%); location: tuyệt đối; top: 50 %; trái: 50% ;

nếu phần tử không có thứ nguyên và không trống

Một số văn bản ở đây h1 ( lề: 0; biến đổi: dịch(-50%, -50%); vị trí: tuyệt đối; trên cùng: 50%; trái: 50%; )

CSS

HTML

Tôi nghĩ nhiều người trong số các bạn từng làm việc với bố cục đã gặp phải nhu cầu căn chỉnh các phần tử theo chiều dọc và biết những khó khăn nảy sinh khi căn chỉnh một phần tử vào giữa.

Có, có một thuộc tính căn chỉnh theo chiều dọc đa giá trị đặc biệt trong CSS để căn chỉnh theo chiều dọc. Tuy nhiên, trên thực tế nó không hề hoạt động như mong đợi. Hãy thử tìm hiểu điều này.

Hãy so sánh các phương pháp sau. Căn chỉnh bằng cách sử dụng:

những cái bàn,
thụt đầu dòng,
chiều cao giữa các dòng
kéo dài,
biên độ âm,
biến đổi
phần tử giả
flexbox.

Để minh họa, hãy xem xét ví dụ sau.

Có hai phần tử div, trong đó một phần tử được lồng vào phần tử kia. Hãy cung cấp cho họ các lớp tương ứng - bên ngoài và bên trong.

Thử thách là căn chỉnh phần tử bên trong với tâm của phần tử bên ngoài.

Đầu tiên, hãy xem xét trường hợp khi biết kích thước của các khối bên ngoài và bên trong. Hãy thêm quy tắc display: inline-block vào phần tử bên trong và text-align: center và Vertical-align: middle vào phần tử bên ngoài.

Hãy nhớ rằng căn chỉnh chỉ áp dụng cho các phần tử có chế độ hiển thị nội tuyến hoặc khối nội tuyến.

Hãy đặt kích thước của các khối cũng như màu nền để chúng ta có thể nhìn thấy đường viền của chúng.

Bên ngoài ( chiều rộng: 200px; chiều cao: 200px; căn chỉnh văn bản: giữa; căn chỉnh dọc: giữa; màu nền: #ffc; ) .inner ( hiển thị: khối nội tuyến; chiều rộng: 100px; chiều cao: 100px; màu nền : #fcc )
Sau khi áp dụng các kiểu, chúng ta sẽ thấy khối bên trong được căn chỉnh theo chiều ngang chứ không phải theo chiều dọc:
http://jsfiddle.net/c1bgfffq/

Tại sao nó lại xảy ra? Vấn đề là thuộc tính căn chỉnh dọc ảnh hưởng đến việc căn chỉnh của chính phần tử chứ không phải nội dung của nó (ngoại trừ khi nó được áp dụng cho các ô trong bảng). Do đó, việc áp dụng thuộc tính này cho phần tử bên ngoài không tạo ra bất cứ thứ gì. Hơn nữa, việc áp dụng thuộc tính này cho một phần tử bên trong cũng sẽ không có tác dụng gì, vì các khối nội tuyến được căn chỉnh theo chiều dọc so với các khối liền kề và trong trường hợp của chúng ta, chúng ta có một khối nội tuyến.

Có một số kỹ thuật để giải quyết vấn đề này. Dưới đây chúng ta sẽ xem xét kỹ hơn về từng người trong số họ.

Căn chỉnh bằng bảng Giải pháp đầu tiên bạn nghĩ đến là thay thế khối bên ngoài bằng bảng gồm một ô. Trong trường hợp này, việc căn chỉnh sẽ được áp dụng cho nội dung của ô, tức là cho khối bên trong.

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

Nhược điểm rõ ràng của giải pháp này là, từ quan điểm ngữ nghĩa, việc sử dụng bảng để căn chỉnh là không chính xác. Nhược điểm thứ hai là việc tạo bảng yêu cầu thêm một phần tử khác xung quanh khối bên ngoài.

Điểm trừ đầu tiên có thể được loại bỏ một phần bằng cách thay thế thẻ table và td bằng div và thiết lập chế độ hiển thị bảng trong CSS.

.outer-wrapper ( display: table; ) .outer ( display: table-cell; )
Tuy nhiên, khối bên ngoài vẫn sẽ là một cái bàn với mọi hậu quả sau đó.

Căn chỉnh bằng cách thụt lề Nếu biết chiều cao của khối bên trong và bên ngoài, thì có thể thiết lập căn chỉnh bằng cách sử dụng thụt lề dọc của khối bên trong bằng công thức: (H bên ngoài – H bên trong) / 2.

Bên ngoài ( chiều cao: 200px; ) . bên trong ( chiều cao: 100px; lề: 50px 0; )
http://jsfiddle.net/c1bgfffq/6/

Nhược điểm của giải pháp này là nó chỉ được áp dụng trong một số trường hợp hạn chế khi đã biết chiều cao của cả hai khối.

Căn chỉnh theo chiều cao dòng Nếu bạn biết rằng khối bên trong không được chiếm nhiều hơn một dòng văn bản thì bạn có thể sử dụng thuộc tính line-height và đặt nó bằng chiều cao của khối bên ngoài. Vì nội dung của khối bên trong không được bao bọc ở dòng thứ hai nên bạn cũng nên thêm các quy tắc khoảng trắng: nowrap và tràn: ẩn.

Bên ngoài ( chiều cao: 200px; chiều cao dòng: 200px; ) . bên trong ( khoảng trắng: nowrap; tràn: ẩn; )
http://jsfiddle.net/c1bgfffq/12/

Kỹ thuật này cũng có thể được sử dụng để căn chỉnh văn bản nhiều dòng nếu bạn xác định lại giá trị chiều cao dòng cho khối bên trong, đồng thời thêm các quy tắc display: inline-block và Vertical-align: middle.

Bên ngoài ( chiều cao: 200px; chiều cao dòng: 200px; ) .inner ( chiều cao dòng: bình thường; hiển thị: khối nội tuyến; căn chỉnh dọc: giữa; )
http://jsfiddle.net/c1bgfffq/15/

Nhược điểm của phương pháp này là phải biết chiều cao của khối bên ngoài.

Căn chỉnh bằng cách sử dụng "kéo dài" Phương pháp này có thể được sử dụng khi không biết chiều cao của khối bên ngoài nhưng đã biết chiều cao của khối bên trong.

Để làm điều này bạn cần:

đặt vị trí tương đối cho khối bên ngoài và định vị tuyệt đối cho khối bên trong;

thêm các quy tắc top: 0 và Bottom: 0 vào khối bên trong, do đó nó sẽ kéo dài đến toàn bộ chiều cao của khối bên ngoài;

đặt phần đệm dọc của khối bên trong thành tự động.

.outer ( vị trí: tương đối; ) .inner ( chiều cao: 100px; vị trí: tuyệt đối; trên cùng: 0; dưới cùng: 0; lề: tự động 0; )
http://jsfiddle.net/c1bgfffq/4/

Ý tưởng đằng sau kỹ thuật này là việc đặt chiều cao cho khối được kéo dài và được định vị tuyệt đối sẽ khiến trình duyệt tính toán phần đệm dọc theo tỷ lệ bằng nhau nếu nó được đặt thành auto .

Căn chỉnh sử dụng lề trên âm Phương pháp này đã được biết đến rộng rãi và được sử dụng rất thường xuyên. Giống như cái trước, nó được sử dụng khi không biết chiều cao của khối bên ngoài nhưng đã biết chiều cao của khối bên trong.

Bạn cần đặt khối bên ngoài thành vị trí tương đối và khối bên trong thành định vị tuyệt đối. Sau đó, bạn cần di chuyển khối bên trong xuống một nửa chiều cao của khối bên ngoài trên cùng: 50% và nâng nó lên một nửa chiều cao của chính nó lề-top: -H bên trong / 2.

Bên ngoài ( vị trí: tương đối; ) . bên trong ( chiều cao: 100px; vị trí: tuyệt đối; trên cùng: 50%; lề trên: -50px; )
http://jsfiddle.net/c1bgfffq/13/

Nhược điểm của phương pháp này là phải biết chiều cao của dàn lạnh.

Căn chỉnh bằng cách sử dụng biến đổi Phương pháp này tương tự như phương pháp trước, nhưng nó có thể được sử dụng khi không xác định được chiều cao của khối bên trong. Trong trường hợp này, thay vì đặt khoảng đệm pixel âm, bạn có thể sử dụng thuộc tính biến đổi và di chuyển khối bên trong lên bằng cách sử dụng hàm dịch Y và giá trị -50%.

Bên ngoài ( vị trí: tương đối; ) . bên trong ( vị trí: tuyệt đối; trên cùng: 50%; biến đổi: dịchY(-50%); )
http://jsfiddle.net/c1bgfffq/9/

Tại sao không thể đặt giá trị dưới dạng phần trăm trong phương pháp trước? Vì giá trị lề phần trăm được tính tương ứng với phần tử gốc nên giá trị 50% sẽ bằng một nửa chiều cao của hộp bên ngoài và chúng ta sẽ cần nâng hộp bên trong lên một nửa chiều cao của chính nó. Thuộc tính biến đổi là hoàn hảo cho việc này.

Nhược điểm của phương pháp này là không thể sử dụng nếu dàn lạnh có khả năng định vị tuyệt đối.

Căn chỉnh với Flexbox Cách căn chỉnh dọc hiện đại nhất là sử dụng Flexbox (thường được gọi là Flexbox). Mô-đun này cho phép bạn kiểm soát linh hoạt vị trí của các thành phần trên trang, sắp xếp chúng ở hầu hết mọi nơi. Căn giữa cho Flexbox là một công việc rất đơn giản.

Khối bên ngoài cần được đặt thành display: flex và khối bên trong thành Margin: auto . Và đó là tất cả! Đẹp chứ?

Bên ngoài ( hiển thị: flex; chiều rộng: 200px; chiều cao: 200px; ) . bên trong ( chiều rộng: 100px; lề: tự động; )
http://jsfiddle.net/c1bgfffq/14/

Nhược điểm của phương pháp này là Flexbox chỉ được hỗ trợ bởi các trình duyệt hiện đại.

Tôi nên chọn phương pháp nào? Bạn cần bắt đầu từ tuyên bố vấn đề:

Để căn chỉnh văn bản theo chiều dọc, tốt hơn nên sử dụng thuộc tính thụt lề dọc hoặc thuộc tính line-height.
Đối với các phần tử được định vị tuyệt đối với chiều cao đã biết (ví dụ: biểu tượng), phương pháp có thuộc tính lề trên âm là lý tưởng.
Đối với các trường hợp phức tạp hơn, khi không xác định được chiều cao của khối, bạn cần sử dụng phần tử giả hoặc thuộc tính biến đổi.
Chà, nếu bạn may mắn đến mức không cần hỗ trợ các phiên bản cũ hơn của trình duyệt IE, thì tất nhiên, tốt hơn hết bạn nên sử dụng Flexbox.

Việc căn chỉnh các thành phần khác nhau, chẳng hạn như trên một trang web hoặc trang, ban đầu là một nhiệm vụ khó khăn đối với một số người vì việc căn chỉnh văn bản theo chiều dọc bị ảnh hưởng. Thật kỳ lạ, một trong những cách khó sử dụng CSS nhất là tập trung vào nội dung. Việc căn giữa nội dung theo chiều ngang tương đối dễ dàng tại một số thời điểm. Việc căn giữa nội dung theo chiều dọc hầu như luôn khó khăn. Căn giữa một phần tử khác cần được căn chỉnh theo chiều dọc bằng CSS. Đây chắc chắn là một câu hỏi rất thường gặp và gây khó khăn cho các nhà thiết kế và quản trị viên web. Tuy nhiên, có nhiều phương pháp để thực hiện định tâm dọc và mỗi phương pháp đều khá dễ sử dụng.

Nếu bạn đã từng thử thì sẽ thấy khó, đặc biệt nếu bạn muốn tránh sử dụng bảng. May mắn thay, tiếng kêu cứu của chúng tôi đã được lắng nghe và một trong những vũ khí mới được thêm vào kho vũ khí CSS để giải quyết vấn đề này là một kiểu bố cục được gọi là bố cục hộp linh hoạt. Như bạn sẽ tìm hiểu sau đây, nó cung cấp cho bạn một số tính năng thực sự tuyệt vời để đơn giản hóa các bố cục phức tạp. Một số chức năng tuyệt vời này cũng cho phép bạn căn giữa nội dung của mình theo chiều dọc và chiều ngang và đó là những gì chúng tôi sẽ đề cập trong hướng dẫn này. Bạn có thể thực hiện việc này bằng phần đệm ở một mức độ nào đó, nhưng nó có thể đưa bố cục của bạn đến các màn hình nhỏ hơn. Việc thêm một lớp CSS tùy chỉnh vào biểu định kiểu của bạn có nghĩa là bạn có thể căn giữa bất kỳ nội dung nào theo chiều dọc trong vài giây.

Căn chỉnh ngang xác định cách các cạnh trái và phải của đoạn văn thẳng hàng giữa các cạnh trái và phải của hộp văn bản. Căn chỉnh dọc xác định vị trí dọc của ký tự trong trường văn bản. Việc thiếu các cách tốt để căn giữa các phần tử theo chiều dọc trong CSS đã là một lỗ hổng đen tối đối với danh tiếng của nó trong gần như toàn bộ sự tồn tại của nó.

Phương pháp đầu tiên với chiều cao dòng

Phương pháp đầu tiên đơn giản và hơi tầm thường, nhưng nó có những nhược điểm sẽ hạn chế việc sử dụng nó. Khi mã hóa các trang html cho một trang web, khoảng cách dòng của nội dung văn bản có lẽ là một trong những thuộc tính thường được để mặc định. Nói chung, chúng ta cần đặt chiều cao của chính dòng đó, có chiều cao tương tự cho khối nơi nó được sử dụng chiều cao giữa các dòng tài sản.

Đây là phương pháp đầu tiên được thể hiện trong các cuộc biểu tình

CSS

Constutesim_first(
đường viền: 2px liền khối #bf1515;
chiều cao: 175px;
}
.constutesim_first > p(
chiều cao dòng: 175px;
lề:0;
căn chỉnh văn bản:giữa;
phần đệm: 0;
cỡ chữ: 17px;
màu sắc: #3152a0;
Họ phông chữ: Tahoma;
độ dày phông chữ: đậm;
}

Bạn cũng có thể thấy ngay mọi thứ sẽ trông như thế nào trong thực tế.

Sử dụng một phương pháp tương tự, có thể nhận ra cách định vị hình ảnh, hình ảnh sẽ ở giữa và chắc chắn là theo chiều dọc. Ở đây tất cả những gì còn lại là chỉ định một thuộc tính: Vertical-align: middle; chịu trách nhiệm hiển thị hình ảnh.

Biến thể thứ hai, đi kèm với hình ảnh

CSS

Biến thể thứ hai (
đường viền: 2px màu đỏ đậm;
chiều cao dòng: 158px;
}

Div biến thể thứ hai(
căn chỉnh văn bản:giữa;
}
.img-biến thể thứ hai (
căn dọc: giữa;
đường viền: 0px liền khối #3a3838;
}

Chúng tôi triển khai ảnh chụp nhanh ở giữa và dọc của hình ảnh.

Căn chỉnh với thuộc tính vị trí

Đây có lẽ là phương pháp được biết đến nhiều nhất nhưng cũng là phương pháp được sử dụng rộng rãi nhất khi sử dụng CSS. Nhưng ở đây chúng ta cần nói thêm rằng nó cũng không lý tưởng và phương pháp này cũng có những sắc thái nhỏ riêng liên quan đến tâm của phần tử, nếu đặt theo tỷ lệ phần trăm thì nó sẽ được căn giữa ở phía bên trái của phần tử. phía trên, bên trong blog.

Biến thể Cherevert (
đường viền: 2px liền khối #c30b0b;
chiều cao: 173px;
hiển thị: bảng;
chiều rộng: 100%;
cỡ chữ: 17px;
độ dày phông chữ: đậm;
màu: #3945a0;
}

Cherevert-biến div(
hiển thị: ô bảng;
căn dọc: giữa;
căn chỉnh văn bản:giữa;
}

Trước hết, hãy xem đâu là mặc định được hầu hết các trình duyệt sử dụng. Trong hầu hết các trình duyệt ban ngày hiện đại, khoảng cách dòng.

Căn chỉnh với thuộc tính flex

Ở đây chúng ta đến với một phiên bản nguyên bản hơn, có các thuộc tính riêng mà hiếm khi có thể tìm thấy trong cách bố trí tài nguyên Internet. Nhưng chúng vẫn được sử dụng và trong một số trường hợp chúng vẫn hữu ích. Điều này thiết lập trục chính, do đó định nghĩa của các phần tử linh hoạt định hướng được đặt trong vùng chứa đĩa mềm.

Căn chỉnh với thuộc tính biến đổi

CSS

Dọc-medilpasudsa (
đường viền: 2px liền khối #e00a0a;
chiều cao: 158px;
cỡ chữ: 19px;
độ dày phông chữ: đậm;
màu: #353c71;
}
.vertical-medilpasudsa > div(
vị trí: tương đối;
trên cùng: 50%;
biến đổi: dịchY(-50%);
căn chỉnh văn bản:giữa;
}

Khi bạn chỉ định các giá trị dưới dạng số, nó sẽ sử dụng cỡ chữ hiện tại làm cơ sở. Kích thước phông chữ hiện tại được nhân với số bạn chỉ định để tính chiều cao dòng hoặc khoảng cách giữa các dòng.

Nếu bạn muốn căn giữa các ký tự theo chiều ngang trong một phần tử, bạn nên sử dụng text-align: center. Một tùy chọn là nếu bạn muốn căn giữa nó theo chiều dọc và bạn có chân trang đầu trang và một hàng văn bản cố định, hãy đặt chiều cao của dòng bằng với chiều cao của chân trang.

Nếu bạn cần căn giữa văn bản trong một phần tử như div, tiêu đề hoặc đoạn văn, bạn có thể sử dụng thuộc tính CSS căn chỉnh văn bản.

Căn chỉnh văn bản có một số thuộc tính hợp lệ:

Center: Kết cấu được căn giữa;
left: Sẽ căn chỉnh về phía bên trái của container;
right: Căn chỉnh về phía bên phải của container
biện minh: Buộc phải căn chỉnh với cả cạnh trái và phải của vùng chứa, ngoại trừ các hàng ngoài cùng;
biện minh cho tất cả: Buộc chuỗi ngoài cùng căn chỉnh các dấu hiệu;
bắt đầu: Tương tự như bên trái, chỉ khi hướng đi từ trái sang phải. Nhưng sẽ đúng nếu ban đầu bạn đặt hướng văn bản, điều này sẽ xảy ra từ phải sang trái;
Kết thúc: Ngược lại với sự khởi đầu;
match-parent: Tương tự như kế thừa, ngoại trừ phần đầu và phần cuối, được tính tương ứng với phần tử cha;

Sử dụng các thuộc tính này để căn chỉnh văn bản trong div cha hoặc div trình bao bọc. Nếu bạn muốn căn giữa văn bản theo chiều ngang trong một phần tử, bạn nên sử dụng text-align: center.

Một tùy chọn là nếu bạn muốn căn giữa nó theo chiều dọc, nếu bạn có chân trang đầu trang cố định và một hàng văn bản, hãy đặt chiều cao của dòng bằng với chiều cao của chân trang.

Rất thường xuyên trong bố cục, cần phải căn giữa một số phần tử theo chiều ngang và/hoặc chiều dọc. Vì vậy, tôi quyết định thực hiện một bài viết với nhiều cách căn giữa khác nhau để mọi thứ đều có sẵn ở một nơi.

Lề căn chỉnh ngang: tự động

Căn chỉnh theo chiều ngang bằng cách sử dụng lề được sử dụng khi biết chiều rộng của phần tử ở giữa. Hoạt động cho các phần tử khối:

Elem ( lề trái: auto; lề phải: auto; chiều rộng: 50%; )

Việc chỉ định tự động cho lề phải và lề trái làm cho chúng bằng nhau, giúp phần tử căn giữa theo chiều ngang trong khối cha.

căn chỉnh văn bản: giữa

Phương pháp này phù hợp để căn giữa văn bản trong một khối. căn chỉnh văn bản: giữa:

Căn chỉnh với text-align .wrapper ( text-align: center; )

Tôi căn giữa

vị trí và lề âm còn lại

Thích hợp cho việc định tâm các khối có chiều rộng đã biết. Chúng tôi cung cấp cho khối cha vị trí: tương đối so với vị trí tương đối với nó, phần tử ở giữa vị trí: tuyệt đối, trái: 50% và lề trái âm có giá trị bằng một nửa chiều rộng của phần tử:

Căn chỉnh với vị trí .wrapper ( vị trí: tương đối; ) .wrapper p ( trái: 50%; lề: 0 0 0 -100px; vị trí: tuyệt đối; chiều rộng: 200px; )

Tôi căn giữa

hiển thị: khối nội tuyến + căn chỉnh văn bản: trung tâm

Phương pháp này phù hợp để căn chỉnh các khối có chiều rộng không xác định, nhưng yêu cầu phải có trình bao bọc cha. Ví dụ: bạn có thể căn giữa menu ngang theo cách này:

Căn chỉnh với màn hình: inline-block + text-align: center; .navigation ( text-align: center; ) .navigation li ( display: inline-block; )

Chiều cao dòng căn chỉnh dọc

Để căn chỉnh một dòng văn bản, bạn có thể sử dụng cùng các giá trị chiều cao và khoảng cách dòng cho khối cha. Thích hợp cho các nút, mục menu, v.v.

chiều cao dòng .wrapper ( chiều cao: 100px; chiều cao dòng: 100px; )

Tôi được căn chỉnh theo chiều dọc

vị trí và ký quỹ âm tăng lên

Một phần tử có thể được căn chỉnh theo chiều dọc bằng cách đặt cho nó một chiều cao cố định và áp dụng vị trí: tuyệt đối và lề âm lên bằng một nửa chiều cao của phần tử được căn chỉnh. Khối cha phải được cung cấp vị trí: tương đối:

Trình bao bọc ( vị trí: tương đối; ) elem ( chiều cao: 200px; lề: -100px 0 0; vị trí: tuyệt đối; trên cùng: 50%; )

Bằng cách này, bằng cách sử dụng vị trí và lề âm, bạn có thể căn giữa một phần tử trên trang.

hiển thị: ô bảng

Để căn chỉnh theo chiều dọc, thuộc tính display: table-cell được áp dụng cho phần tử, buộc phần tử này phải mô phỏng một ô trong bảng. Chúng tôi cũng đặt chiều cao và căn chỉnh dọc: giữa của nó. Hãy gói tất cả những thứ này vào một thùng chứa với thuộc tính dislpay: table; :

Hiển thị căn chỉnh dọc: table-cell .wrapper ( display: table; width: 100%; ) .cell ( display: table-cell; Height: 100px; Vertical-align: middle; )

Tôi được căn chỉnh theo chiều dọc

Căn chỉnh động của một phần tử trên một trang

Chúng tôi đã xem xét các cách căn chỉnh các thành phần trên một trang bằng CSS. Bây giờ chúng ta hãy xem cách triển khai jQuery.

Hãy kết nối jQuery với trang:

Tôi khuyên bạn nên viết một hàm đơn giản để căn giữa một phần tử trên trang, hãy gọi nó là AlignCenter() . Bản thân phần tử này đóng vai trò là đối số của hàm:

Hàm AlignCenter(elem) ( // code ở đây )

Trong phần nội dung của hàm, chúng tôi tính toán linh hoạt và gán tọa độ của tâm trang cho các thuộc tính CSS left và top:

Hàm căn chỉnhCenter(elem) ( elem.css(( left: ($(window).width() - elem.width()) / 2 + "px", top: ($(window).height() - elem. Height()) / 2 + "px" // đừng quên thêm vị trí: tuyệt đối vào phần tử để kích hoạt tọa độ )) )

Trong dòng đầu tiên của hàm, chúng ta lấy chiều rộng của tài liệu và trừ đi chiều rộng của phần tử, chia đôi - đây sẽ là tâm ngang của trang. Dòng thứ hai thực hiện tương tự, chỉ có chiều cao để căn chỉnh theo chiều dọc.

Hàm đã sẵn sàng, tất cả những gì còn lại là gắn nó vào các sự kiện sẵn sàng của DOM và thay đổi kích thước cửa sổ:

$(function() ( // gọi hàm căn giữa khi DOM đã sẵn sàngalignCenter($(elem)); // gọi hàm khi thay đổi kích thước cửa sổ $(window).resize(function() ( AlignCenter($(elem) )); )) // hàm căn giữa phần tử function AlignCenter(elem) ( elem.css(( // tính tọa độ bên trái và trên cùng bên trái: ($(window).width() - elem.width()) / 2 + " px", top: ($(window).height() - elem.height()) / 2 + "px" )) ) ))

Ứng dụng của Flexbox

Các tính năng CSS3 mới, chẳng hạn như Flexbox, đang dần trở nên phổ biến. Công nghệ giúp tạo đánh dấu mà không cần sử dụng float, định vị, v.v. Nó cũng có thể được sử dụng để căn giữa các phần tử. Ví dụ: áp dụng Flexbox cho phần tử gốc.wrapper và căn giữa nội dung bên trong:

Trình bao bọc ( display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; Height: 500px; width: 500px; ) .wrapper .content ( lề: auto; /* lề: 0 auto; chỉ ngang */ /* lề: chỉ dọc */ ) Lorem ipsum dolor sit amet

Quy tắc này căn giữa phần tử theo chiều ngang và chiều dọc cùng một lúc - lề giờ đây không chỉ hoạt động đối với căn chỉnh theo chiều ngang mà còn đối với chiều dọc. Và không có chiều rộng/chiều cao đã biết.

Tài nguyên liên quan Trợ giúp dự án