Tôi đang cố gắng tập trung các newsslider (trong div dưới container) trên trang này:Center một div trong CSS
http://www.luukratief-design.nl/dump/parallax/index.html
Tôi đã có text-align: center;
Tuy nhiên nó không hoạt động .
Mọi đề xuất?
Các text-align: center; chỉ tập trung của phần tử nội dung inline, không phải là yếu tố chính nó.
Nếu nó là một block element (một div là), bạn cần phải thiết lập margin: 0 auto;, khác nếu nó là một inline element, bạn cần phải thiết lập các text-align: center; vào yếu tố mẹ của nó để thay thế.
margin: 0 auto; sẽ đặt lề trên và lề xuống 0 và lề trái và lề phải auto (có cùng kích thước) để tự động đặt chính nó vào giữa. Điều này chỉ hoạt động nếu phần tử khối được đề cập có một số đã biết là width (hoặc là cố định hoặc tương đối), nếu không nó không thể tìm ra vị trí bắt đầu và kết thúc.
và bạn có thể phải cung cấp cho "div" một chiều rộng rõ ràng là tốt. –
Vâng, bạn thực sự cần phải cung cấp cho phần tử khối một chiều rộng rõ ràng, tôi đã chỉnh sửa nó. – BalusC
IIRC, một số phiên bản cũ hơn của IE sẽ không nhận ra giá trị ký tự 'tự động', nhưng chúng * sẽ * (sai) sử dụng' văn bản -align' đến phần tử khối trung tâm, vì vậy hãy sử dụng cả hai nếu bạn có thể. –
thêm
margin:auto;
Thử thêm kiểu này vào kiểu.
margin-left: auto;
Tạo một bảng với hàng duy nhất và ba cột, thiết lập lại và chiều rộng quyền 100% và thì đấy, một trong những trung được làm trung tâm tự động
Đây là câu trả lời hợp lệ. Không thực tế trong hầu hết các kịch bản, vâng. BAO GIỜ, vẫn còn hiệu lực. Xin vui lòng ngừng downvoting một câu trả lời hợp lệ chỉ vì bạn 'cảm thấy thích nó.' –
text-align không nên được sử dụng để tập trung một yếu tố ngăn chặn . (ngoại trừ trong IE6, nhưng đây là bug)
Bạn phải sửa chiều rộng của khối, sau đó sử dụng lề: 0 tự động;
#block
{
width: 200px;
border: 1px solid red;
margin: 0 auto;
}
và
<div id="#block">Some text... Lorem ipsum</div>
Hãy thử điều này:
#bottombox {
background:transparent url(../images/bg-bottombox.png) no-repeat scroll 0 0;
float:none;
height:137px;
margin:0 auto;
padding-top:14px;
width:296px;
}
Đó nên tập trung div trong chân của bạn.
Một cách:
<div align="center">you content</div>
Better cách:
<div id="myDiv">you content</div>
CSS cho myDIV:
#myDiv{
margin:0px auto;
}
tôi luôn luôn sử dụng
<div align="center">Some contents......</div>
Tôi xác nhận rằng tính năng này hoạt động với Firefox (v54), Chrome (v58) và Safari (v10). –
Sử dụng text-align: center cho container, display: inline-block cho div wrapper, và display: inline cho div nội dung nội dung theo chiều ngang trung tâm có một chiều rộng không xác định trên các trình duyệt:
<!doctype html>
<html lang="en">
<head>
<style type="text/css">
/* Use inline-block for the wrapper */
.wrapper { display: inline-block; }
.content { display:inline; }
.container { text-align:center; }
/*Media query for IE7 and under*/
@media,
{
.wrapper { display:inline; }
}
</style>
<title>Horizontal Centering Test</title>
</head>
<body>
<div class="container">
<div class="content">
<div class="wrapper">
test text
</div>
</div>
</div>
</body>
</html>
rộng cung cấp được thiết lập, và bạn đặt một DOCTYPE thích hợp,
Hãy thử điều này:
Margin-left: auto;
Margin-right: auto;
Hope hel này ps
Tôi đang bỏ phiếu để đóng câu hỏi này là không có chủ đề vì liên kết chỉ câu hỏi và liên kết đã chết! –