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

#1

E có 1 đoạn code về HTML & CSS như sau:

Nhiệm vụ của e là phải làm sao cho nội dung trong 4 box A B C D được căn vào giữa theo lẫn chiều dọc và chiều ngang. Nếu là chiều ngang thì e chỉ cần áp dụng thuộc tính text-align là xong, nhưng theo chiều dọc thì em áp dụng thuộc tính vertical-align với giá trị middle thì lại không được :frowning: :frowning:
E nghe thằng bạn nói chỉ cần để dòng line-height:150px; (có chiều cao bằng chiều cao của box) thì nội dung sẽ tự động vô giữa theo chiều dọc. Nhưng e không hiểu vì sao để line-height với value = chiều cao của box thì nó lại vô giữa được ?? line-height chỉ set khoảng cách giữa các dòng thôi mà ??

Còn 1 nhiệm vụ nữa là em phải căn chỉnh sao cho các box đều nằm trên cùng 1 hàng trừ box D, trong đó box A & B nằm bên trái của hàng, box C nằm bên phải của hàng, em code như sau:

Em set thuộc tính float cho box A & B giá trị left và box C giá trị right, còn box D thì không set nhưng TẠI SAO box D lại nhảy lên cùng 1 hàng với 3 box kia luôn ??? Và cho e xin giải pháp ạ ^^^^

#2

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

2 Likes
#3

Sao bạn trả lời huề vốn thế ? :smile: 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à ?

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ỉ :thinking:

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 ? :wink:
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 :joy:

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 ?

#4

À, 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ỉ :cry:

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

#5

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;
}
#6

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)

#7

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à

1 Like
#8

Cho e hỏi 2 dòng này dùng để làm gì ạ ?

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

#10

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

#11

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

#12

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.

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 :smiley:

#13

À, 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 :smiley:

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 ?

#14

Trang VietJack cũng chơi tếu thật :joy:
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 :joy:
Còn table cell thì không nói gì.

#15

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

83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?