Tôi muốn căn giữa ba div xuất hiện trong mockup bên dưới (tất cả đều có "float: left"). Điều này có khả thi không?Làm cách nào để căn giữa các div động?
Tôi không bận tâm khi có trình bao bọc.
Căn chỉnh văn bản: trung tâm và hiển thị: inline-block sẽ không hoạt động với mã tôi có.
div#wrapper {
width:960px;
margin: 0 auto;
}
chỉnh sửa:
chuyển mã hoàn chỉnh từ fiddle để trả lời theo gợi ý
<div id="outer-wrapper">
<div id="wrapper">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
</div>
HTML
div#outer-wrapper{
border:2px solid black;
padding:10px;
width:100%;
}
CSS
div#wrapper{
width:99px;
margin:0 auto;
}
div {
width:33px;
height:20px;
}
div.one{
background:red;
float:left;
}
div.two{
background:blue;
float:left;
}
div.three{
background:green;
float:left;
}
Floats, như tên cho thấy, hoàn toàn không phụ thuộc vào container của họ. Vì vậy, bạn không thể trung tâm chúng theo một container, bởi vì họ sẽ không biết container.
_Completely_ độc lập? Không có họ. – nnnnnn
Không * hoàn toàn *, mỗi lần, chỉ trong ngữ cảnh của câu hỏi, như trong vị trí tương đối của chúng. –
Nếu bạn muốn căn giữa chúng, bạn không thể nổi chúng. Một giải pháp thay thế tốt hơn là làm cho tất cả chúng là display: inline-block để bạn vẫn có thể tạo kiểu cho chúng thành phần tử khối và chúng sẽ vẫn chú ý đến số text-align: center của bạn trên trình bao bọc gốc. Đây có vẻ là một giải pháp tốt cho ví dụ giới hạn mà bạn đã cung cấp.
Để tính đến khả năng tương thích của trình duyệt, bạn cần thay đổi chúng thành <span> thay vì <div> trước khi thêm display: inline-block vào chúng. Điều này sẽ được hỗ trợ trong mọi thứ IE7 trở lên và tất cả các trình duyệt hiện đại khác. IE6 sẽ không được hỗ trợ, nhưng it's only widely used in China anymore.
Đừng quên đảm bảo rằng các phần tử thực sự là 'float: none;'. Và căn chỉnh văn bản: trung tâm; nên được thêm vào vùng chứa mẹ (trong ví dụ div # wrapper). – lechup
Hope this helps:
<body>
<div style="width:306px; border:#333333 1px solid; margin-left:auto; margin-right:auto">
<div style="width:100px; border:#333333 1px solid; float:left;">div A</div>
<div style="width:100px; border:#333333 1px solid; float:left;">div B</div>
<div style="width:100px; border:#333333 1px solid; float:left;">div C</div>
</div>
</body>
gì tôi sẽ làm là thêm một div container cho họ.
Sau đó, thêm tràn: tự động sao cho div vùng chứa kết thúc tốt đẹp quanh 3 div và sau đó đặt div vùng chứa ở giữa có lề: 0 tự động.
Bạn cũng có thể sử dụng một danh sách và nhận được kết quả tương tự:
CSS:
.wrap
{
border:2px solid black;
width:100%;
}
ul
{
width:99px;
margin:0 auto;
height: 20px;
}
ul li
{
width:33px;
height:20px;
float: left;
margin: 0px;
padding: 0px;
}
ul li.red
{
background-color: red;
}
ul li.blue
{
background-color: blue;
}
ul li.green
{
background-color: green;
}
HTML:
<div class="wrap">
<ul>
<li class="red"> </li>
<li class="blue"></li>
<li class="green"></li>
</ul>
</div>
Hãy thử điều này: http://jsfiddle.net/nvpXx/3/
Bạn có thể bọc của bạn các div được thả nổi với một phần tử khối nội tuyến và đặt nó vào trong phần tử cha của nó.
HTML
<div id="main">
<div class="wrap">
<div class="item">thing 1</div>
<div class="item">thing 2</div>
<div class="item">thing 3</div>
<div class="clear"></div>
</div>
</div>
CSS
#main {width: 600px; background-color: #eee; margin: 0 auto; padding: 10px; text-align: center;}
#main .item {float: left; border: 1px solid #ccc; margin: 5px; }
.clear {clear: both;}
.wrap { display: inline-block; padding: 5px; bordeR: 1px solid black; margin: auto;}
Pitfall tiềm năng
này không hoạt động tốt nếu bạn có rất nhiều mặt hàng nổi rằng họ quấn vào một dòng thứ hai. Tại thời điểm đó, các div.wrap mở rộng đến 100% container của nó và kết quả là tất cả mọi thứ là off-center.
Hãy thử thế này, giữ cho nó đơn giản:
<ul>
<li> one </li>
<li> two </li>
<li> three </li>
</ul>
<style>
ul{margin:0 auto;max-width:500px}
ul li{float:left;margin:0 auto 1em;text-align:center;width:33%}
</style>
Điều này sẽ làm cho nó thân thiện mặc dù nó phá vỡ vào một lúc nào đó, nó giúp tạo ra một truy vấn phương tiện truyền thông cho max-width:
<style>
@media screen and (max-width:520px){ ul li{float:none} }
</style>
Điều đó sẽ căn giữa trình bao bọc trên màn hình, tôi nghĩ rằng anh ấy muốn căn giữa các phần tử nổi * bên trong * trình bao bọc. – animuson
Sau đó, chỉ cần tạo _another_ wrapper, nguyên tắc là như nhau (xem fiddle) – calumbrodie
+1, nhưng bạn nên di chuyển mã tương đối từ JSFiddle vào câu trả lời của bạn. Điều này chỉ hoạt động khi bạn biết chiều rộng của các phần tử - mà người hỏi làm. Nếu không, tôi sẽ đề cập đến câu trả lời của @ animuson. –