Hỏi về 1 đoạn code HTML+ CSS

line-height là chiều cao của dòng. Mặc định thì chữ sẽ được đưa vào chính giữa dòng theo chiều dọc. Nếu đặt line-height bằng với chiều cao của parent control thì chữ sẽ đưa vào chính giữa control đó.

Bạn muốn căn giữa theo chiều ngang thì thêm tag <<>center>Nội dung gì đó <<>/center> trong mỗi div
Mà theo mình, nếu muốn chỉnh căn chỉnh đơn giản, bạn đừng dùng <<>div> mà hãy dùng <<>table>, table mới có vertical-align chứ <<>div> mình làm không được.

Tương tự, nếu muốn A B C cùng 1 dòng, D xuống dòng thì làm thành table có 2 cột 2 hàng, hàng dưới thêm colspan để nhập 2 cột thành 1.

Còn đây là code mình sửa lại dựa trên code của bạn: https://codepen.io/anon/pen/PWqEYe

Nếu đặt line-height bằng với chiều cao của parent control thì chữ sẽ đưa vào chính giữa control đó.

Sao bạn trả lời huề vốn thế ? mình đang cần lý do vì sao set value cho line-height bằng chiều cao của box thì nó lại vô giữa cơ mà ?

table mới có vertical-align chứ <div> mình làm không được.

vậy là vertical-align ko có tác dụng với div hả bạn ? Hay là mình phải tạo 1 cái div to bao bên ngoài 4 cái div kia nhỉ

Tương tự, nếu muốn A B C cùng 1 dòng, D xuống dòng thì làm thành table có 2 cột 2 hàng, hàng dưới thêm colspan để nhập 2 cột thành 1.

Hừm … mình không thích ý tưởng để vào table cho lắm, vì trong khi thiết kế bố cục web đâu có ai dùng table ?
Còn dùng position thì mình thấy cũng được.
À mà mình tìm ra solution rồi, cho thêm dòng clear:both; vào cái class boxD là xong

Nhưng mà mình vẫn chưa giải đáp được câu hỏi: Vì sao box D không set float cho nó mà vẫn nhảy lên 1 hàng của với 3 box kia ?

À, mình có tham khảo trên trang Vietjack thì họ nói rằng vertical-align chỉ áp dụng cho phần tử có style tag là inline & table cell thôi.
Thế thì mình chuyển style tag của thằng box qua inline-block rồi set vertical-align là middle nhưng sao nội dung nó vẫn không vào giữa box theo chiều dọc nhỉ

CodePen

EZjoQW

...

Mình đang tìm 1 solution khác ngoài dùng line-height như trên

bạn tìm hiểu về thuộc tính display: flex; nhé
mình test như này và được rồi nhé
.boxA {
background-color: #c0514e;
float:left;
display: flex;
align-items: center;
justify-content: center;
}

Cái display:flex; em đọc thấy hoa mắt thật @@ chắc dùng đại line-height đi cho dễ

Mà anh @Vi_Huan có biết vì sao em chuyển kiểu tag của box sang inline-block rồi mà vertical-align vẫn không có tác dụng không ? (em nói ở post trên ấy)

mình chỉ dùng flex thôi vì nó đơn giản mà hiệu quả.
còn tại sao dùng inline-block mà k căn chiều dọc được thì mình cũng k rõ.
mình nghĩ là inline-block nó chỉ thành thành 1 box mà nên nó chỉ có thể căn giữa theo chiều ngang được thôi, còn các bro nào có thể làm được cả chiều dọc thì mình k biết.
line-height thì dùng cũng đc nhưng nếu mà trong box có ảnh hoặc nhiều thứ cần căn giữa theo cả hai chiều thì k ổn lắm, tốt nhất dùng flex cho tiện, mà flex đâu có khó chỉ có 2 dòng lệnh là có thể căn giữa được rồi mà

align-items: center; justify-content: center;

Cho e hỏi 2 dòng này dùng để làm gì ạ ?[quote=“Vi_Huan, post:7, topic:40405”]
mà flex đâu có khó chỉ có 2 dòng lệnh là có thể căn giữa được rồi mà
[/quote]

nhưng phải copy + paste vô mỗi box

Mình cũng chưa nghĩ ra solution cho chuyện này. Nếu để float thì các thuộc tính vertical align nó mất. Mà nếu không để float thì mình không biết căn làm sao để đưa C vào mép màn hình

Mình làm được theo yêu cầu của bạn, tuy nhiên không dùng mỗi CSS mà còn sửa cả html nữa: https://codepen.io/anon/pen/YNXdNE

Ukm, thôi dùng cái display:flex; của bạn trên là được rồi, thấy nó cũng khá dễ dùng.

tuy nhiên không dùng mỗi CSS mà còn sửa cả html nữa

Tiếc là nhiệm vụ không cho phép tác động đến code html và chỉ được chỉnh sửa css

À, qua tìm hiểu sơ bộ thì cái line-height là 1 thủ thuật để căn chỉnh nội dung vào giữa box theo chiều dọc (trên W3Schools có nói) nên chắc dùng display:flex cho rồi

mình chỉ dùng flex thôi vì nó đơn giản mà hiệu quả.

Nếu dùng flex thì nó có ảnh hưởng gì đến box đó không anh, nhất là khi mình cần thêm vài thuộc tính nữa cho box ?

À, mình có tham khảo trên trang Vietjack thì họ nói rằng vertical-align chỉ áp dụng cho phần tử có style tag là inline & table cell thôi.

Trang VietJack cũng chơi tếu thật
Bản chất phần tử inline là không thể điều chỉnh kích thước (width & height) cho nó được, do đó border luôn sát với nội dung trong box (trừ khi set padding cho box) nên cần gì phải text-align hay vertical-align
Còn table cell thì không nói gì.

Đặt block A,B,C là display: inline-block; là nó sẽ tự động 1 hàng.