30/09/2018, 23:45
Hỏi về align về html và css
mọi người giúp em căn chỉnh làm sao để nội dung bên trong được nằm giữa khung.
Bài liên quan
mọi người giúp em căn chỉnh làm sao để nội dung bên trong được nằm giữa khung.
Dùng style attribute và text-align: center; property.
nhưng khi em set
height:200px;
thì nó k nằm ở giữa nữaHeight đó là của div element hay cái gì khác bạn ?
Cho mình coi code HTML của bạn thử đi
html viết:
css viết:
Bạn muốn giữa là như thế nào? Giữa theo chiều dọc? Nhưng mà của cái gì? Padding? Toàn bộ trang? Bạn phải đặt câu hỏi đúng thì mọi người sẽ trả lời đúng cho bạn
Cực dễ bạn à
sure luôn .
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align:center;
padding: 70px 0;
border: 3px solid green;
}
</style>
</head>
<body>
<div class="center">
<div>Copyright © 2011 Jake’s Coffee House</div>
<div><a href="mailto:jake@jcoffee.com">jake@jcoffee.com</a></div>
</div>
</body>
</html>
mình cũng mới học thôi nhung trả lời cho bạn 1 số vấn đề như thế này:
+, không bao giờ dc để nội dung lạc lõng không cha không mẹ như phần copyright của bạn, hãy cho nó vào thẻ p hoặc 1 số thẻ tương tự.
+, không dùng thẻ br với mục đích xuống dòng giữa các thẻ . chỉ dùng br để xuống dòng cho đoạn văn bản dài. trong truowfng hợp của bạn muốn xuống dòng hãy set thuộc tính display: block; cho thẻ a
trong trường hợp của bạn có thể set padding-top cho thẻ footer; giá trị tự bạn căn chỉnh , bạn nên dùng giá trị là %,vh,vw thay vì dùng giá trị chính xác tuyệt đối như px
Hình như có thuộc tính vertical-align nhưng mà e chưa hiểu lắm.
ak mình bị sai chỗ đó, có thuộc tính đó nhưng không dùng cho block-level “The vertical-align CSS property specifies the vertical alignment of an inline or table-cell box.”
À. Thảo nào. Thế nó chỉ dùng cho các element là inline thôi ạ.
đúng rồi bạn, cho inline hoạc table-cell, bạn có thể thử với thẻ p, nó sẽ không có tác dụng
Thảo nào hôm trước mình có thử với bài này của thớt mình cho nội dung vào thẻ p rôit set vertical-align nhưng vẫn ko đc. :3
bạn nên tìm hiểu thêm 1 số thông tin vè các van đề liên quan. ví dụ ở đây có 1 vấn đề khá thú vị là trình duyệt sẽ không tính toán độ cao của 1 trang khi nội dụng của nó không dài quá 1 trang màn hình hoặc bạn không set chiều cao trước, khi đó nó sẽ chỉ display từ trên xuống. đó cũng chính là lí do bạn không thể vertical-align cho block vì nó chưa đc tính toán thì align kiểu gì, nó cũng là lí do bạn không thể cứ thế set chiều cao hay padding, margin top hoặc bottom theo % ngay dc, vì % của 1 cái chưa dc tính toán thì k có gì cả
bạn làm như sau là được nhé
footer{ background:brown; border:3px black solid; margin:0px; text-align:center; clear:both; height:100px; line-height:100px; }
Bạn thêm dòng line-height:50px; vào là được, trông nó như thế này:
footer{
background:brown;
border:3px black solid;
margin:0px;
text-align:center;
clear:both;
height:100px;
line-height:50px;
}
Bạn để như vậy là bởi vì trong một khung cao 100px, bạn có hai dòng, bạn muốn hai dòng này ra căn giữa theo chiều dọc thì cho mỗi dòng cao 50px, tương tự footer bạn có 3 dòng thì khoảng 33.33px, 4 dòng là 25px,…
Để bạn tham khảo thêm: http://www.w3schools.com/cssref/pr_dim_line-height.asp