thể trùng lặp:
How to center a div in a div?Làm thế nào để tạo ra một class trung tâm div trong HTML
Một cách đơn giản để làm cho một đối tượng làm trung tâm trong HTML đang sử dụng align='center', nhưng nó không làm việc cho một div.
tôi đã cố gắng:
style='text-align:center';
style='left:50%';
Tôi thậm chí còn đúng một thẻ trung tâm
<center>
Nhưng tôi không thể làm cho div mục tiêu của tôi là trung tâm.
<!DOCTYPE html>
<html>
<head>
<title>Center</title>
</head>
<body>
<div style="text-align: center;">
<div style="width: 500px; margin: 0 auto; background: #000; color: #fff;">This DIV is centered</div>
</div>
</body>
</html>Tested và làm việc trong IE, Firefox, Chrome, Safari và Opera. Tôi không kiểm tra IE6. Văn bản bên ngoài-align là cần thiết cho IE. Các trình duyệt khác (và IE9?) Sẽ hoạt động khi bạn cung cấp giá trị tự động của lề DIV (trái và phải). Ký tự "0 tự động" là viết tắt của lề "0 auto 0 auto" (trên cùng bên phải dưới cùng bên trái).
Lưu ý: văn bản cũng được căn giữa bên trong DIV bên trong, nếu bạn muốn nó ở bên trái chỉ cần chỉ định văn bản căn chỉnh: trái; cho DIV bên trong.
Chỉnh sửa: IE 6, 7, 8 và 9 chạy trên Chế độ tiêu chuẩn sẽ hoạt động với các lề được đặt thành tự động.
tôi cần phải đặt với phần trăm div của tôi không cố định pixel, tôi nghĩ rằng nếu tôi đặt chiều rộng đến 95%, nó sẽ không được trung tâm –
làm thế nào để bạn biết div của mình là ở vị trí tương đối hoặc tĩnh? – meo
@Mac: kỹ thuật này hoạt động tốt với chiều rộng phần trăm. Tuy nhiên nói chung để tự động ký quỹ hoạt động, bạn phải ở Chế độ Chuẩn, mà bạn sẽ cần một khai báo ' bobince
thế nào về một cái gì đó dọc theo những dòng
<style type="text/css">
#container {
margin: 0 auto;
text-align: center; /* for IE */
}
#yourdiv {
width: 400px;
border: 1px solid #000;
}
</style>
....
<div id="container">
<div id="yourdiv">
weee
</div>
</div>
Tôi nghĩ rằng các align="center" gắn nội dung, vì vậy nếu bạn muốn sử dụng phương pháp này, bạn sẽ cần phải sử dụng nó trong một 'wraper' div - một div chỉ kết thúc phần còn lại.
text-align đang thực hiện một loại tương tự.
left:50% bị bỏ qua trừ khi bạn đặt vị trí của div là một cái gì đó như tương đối hoặc tuyệt đối.
Các phương pháp được chấp nhận chung là sử dụng các thuộc tính sau
width:500px; // this can be what ever unit you want, you just have to define it
margin-left:auto;
margin-right:auto;
lề được tự động có nghĩa là chúng lớn/thu nhỏ để phù hợp với cửa sổ trình duyệt (hoặc div mẹ)
CẬP NHẬT
Cảm ơn Meo đã viết bài này, nếu bạn muốn bạn có thể tiết kiệm thời gian và sử dụng tay ngắn phù hợp với lề.
margin:0 auto;
này xác định đỉnh và đáy là 0 (vì nó là zero nó không quan trọng về việc thiếu đơn vị) và bên trái và bên phải được định nghĩa là 'auto' Bạn có thể sau đó, nếu bạn wan't override nói lề trên như bạn làm với bất kỳ quy tắc CSS nào khác.
bạn có thể sử dụng kiểu nội tuyến cho lề .. lề: 0 tự động; – meo
vấn đề là IE không thể hiển thị chính xác div trung tâm; tôi đã thử lề-trái-phải: tự động nhưng không hoạt động trên IE –
@meo Một điểm công bằng. Thông thường nó sẽ là tốt nhất để có lời khuyên của bạn vì nó giúp giảm kích thước tập tin, không nhiều tôi biết, nhưng mỗi ít giúp. Mặc dù cho hướng dẫn, nó giúp giải thích các thuộc tính 'bắt buộc' để làm cho nó hoạt động. – thecoshman
nó phụ thuộc nếu div của bạn là trong position: absolute/cố định hoặc người thân/tĩnh
cho position: absolute & cố định
<div style="position: absolute; /*or fixed*/; width: 50%; height: 300px; left: 50%; top:100px; margin: 0 0 0 -25%">blblablbalba</div>
Bí quyết ở đây là phải có một biên độ tiêu cực nửa chiều rộng của đối tượng
cho position: relative & tĩnh
<div style="position: relative; /*or static*/; width: 50%; height: 300px; margin: 0 auto">blblablbalba</div>
cho cả hai kỹ thuật bắt buộc phải đặt chiều rộng de
Bạn đang cố gắng căn giữa chính div đó hoặc văn bản trong div? – Welbog
tôi nói trong câu hỏi của tôi một div không phải là văn bản của nó. thanks –
Đặt chiều rộng cho 'div', sau đó sử dụng' margin: 0 auto; ': http://jsfiddle.net/spikey/FLL5Z/ – uSeRnAmEhAhAhAhAhA