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.

Người bí ẩn viết 01:59 ngày 01/10/2018

Dùng style attribute và text-align: center; property.

Hoàng Anh viết 01:59 ngày 01/10/2018

nhưng khi em set height:200px; thì nó k nằm ở giữa nữa

Người bí ẩn viết 02:00 ngày 01/10/2018

Height đó là của div element hay cái gì khác bạn ?

Nguyễn Tấn Khoa viết 01:54 ngày 01/10/2018

Cho mình coi code HTML của bạn thử đi

Hoàng Anh viết 01:58 ngày 01/10/2018

html viết:

<footer>
		
			Copyright &copy; 2011 Jake&rsquo;s Coffee House<br/>
			<a href="mailto:jake@jcoffee.com">jake@jcoffee.com</a>
		
</footer>

css viết:

footer{
	background:brown;
	border:3px black solid;
	margin:0px;
	text-align:center;
	clear:both;
	height:100px;
}
Khoa Nguyen viết 02:00 ngày 01/10/2018

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

Thuc Nguyen Tan viết 01:56 ngày 01/10/2018

Cực dễ bạn à

    <div class="google-vertical-align"> hello world and any thing else </div>

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>

Nguyễn Hoàng viết 01:58 ngày 01/10/2018

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

Sáng Béo viết 02:01 ngày 01/10/2018

trong css không có thuộc tính để bạn căn giữa theo chiều dọc

Hình như có thuộc tính vertical-align nhưng mà e chưa hiểu lắm.

Nguyễn Hoàng viết 01:49 ngày 01/10/2018

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.”

Sáng Béo viết 01:51 ngày 01/10/2018

À. Thảo nào. Thế nó chỉ dùng cho các element là inline thôi ạ.

Nguyễn Hoàng viết 01:54 ngày 01/10/2018

đú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

Sáng Béo viết 01:47 ngày 01/10/2018

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

Nguyễn Hoàng viết 01:45 ngày 01/10/2018

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ả

Lê Qúi Nhất viết 01:54 ngày 01/10/2018

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

Man Coi Man viết 01:56 ngày 01/10/2018

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

Bài liên quan
0