Định tâm các div nổi trong một div khác

Tôi đã tìm kiếm các câu hỏi khác và, trong khi vấn đề này có vẻ giống với một vài câu hỏi khác, cho đến nay dường như không có gì tôi giải quyết được vấn đề mà tôi đang gặp phải.

Tôi có một div chứa một số div khác, mỗi div được thả nổi bên trái. Mỗi div đều chứa một ảnh và chú thích. Tất cả những gì tôi muốn là cho nhóm ảnh được căn giữa trong div chứa.

Như bạn có thể thấy từ mã bên dưới, tôi đã thử sử dụng cả hai overflow:hiddenvà margin:x autotrên các div gốc và tôi cũng đã thêm một clear:both(như được đề xuất trong một chủ đề khác) sau các bức ảnh. Dường như không có gì để làm cho một sự khác biệt.

Cảm ơn bạn. Tôi đánh giá cao bất kỳ đề nghị.

<div style="position: relative; margin: 0 auto; overflow: hidden; text-align: center;">
    <h4>Section Header</h4>

    <div style="margin: 2em auto;">

        <div style="float: left; margin: auto 1.5em;">
            <img src="photo1.jpg" /><br />
             Photo Caption
        </div>
        <div style="float: left; margin: auto 1.5em;">
            <img src="photo2.jpg" /><br />
             Photo Caption
        </div>
        <div style="float: left; margin: auto 1.5em;">
            <img src="photo3.jpg" /><br />
             Photo Caption
        </div>

        <div style="clear: both; height: 0; overflow: hidden;"> </div>

    </div>

</div>

Đầu tiên, loại bỏ floatthuộc tính trên divs bên trong . Sau đó, đặt text-align: centerbên ngoài chính div. Và đối với divs bên trong , sử dụng display: inline-block. Cũng có thể là khôn ngoan để cung cấp cho họ chiều rộng rõ ràng quá.

<div style="margin: auto 1.5em; display: inline-block;">
  <img title="Nadia Bjorlin" alt="Nadia Bjorlin" src="headshot.nadia.png"/>
  <br/>
  Nadia Bjorlin
</div>

Với Flexbox, bạn có thể dễ dàng đặt trung tâm theo chiều ngang (và theo chiều dọc) cho trẻ em bên trong div.

Vì vậy, nếu bạn có đánh dấu đơn giản như vậy:

<div class="wpr">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

với CSS:

.wpr
{
    width: 400px;
    height: 100px;
    background: pink;
    padding: 10px 30px;
}

.wpr span
{
    width: 50px;
    height: 50px;
    background: green;
    float: left; /* **children floated left** */
    margin: 0 5px;
}

(Đây là KẾT QUẢ (dự kiến ​​- và không mong muốn )

Bây giờ thêm các quy tắc sau vào trình bao bọc:

display: flex;
justify-content: center; /* align horizontal */

và những đứa trẻ nổi được trung tâm liên kết ( DEMO )

Chỉ để cho vui, để có được sự liên kết dọc cũng như chỉ cần thêm:

align-items: center; /* align vertical */

BẢN GIỚI THIỆU

Tôi đã hoàn thành việc trên bằng cách sử dụng định vị tương đối và nổi bên phải.

Mã HTML:

<div class="clearfix">                          
    <div class="outer-div">
        <div class="inner-div">
            <div class="floating-div">Float 1</div>
            <div class="floating-div">Float 2</div>
            <div class="floating-div">Float 3</div>
        </div>
    </div>
</div>

CSS:

.outer-div { position: relative; float: right; right: 50%; }
.inner-div { position: relative; float: right; right: -50%; }
.floating-div { float: left; border: 1px solid red; margin: 0 1.5em; }

.clearfix:before,
.clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

Mã thông báo: http://jsfiddle.net/MJ9yp/

Điều này sẽ hoạt động trong IE8 trở lên, nhưng không sớm hơn (ngạc nhiên, ngạc nhiên!)

Thật không may, tôi không nhớ nguồn gốc của phương pháp này, vì vậy tôi không thể cung cấp tín dụng cho tác giả ban đầu. Nếu ai khác biết, xin vui lòng gửi liên kết!

Các giải pháp sau đây không sử dụng các khối nội tuyến. Tuy nhiên, nó đòi hỏi hai div trợ giúp:

1. Nội dung được thả nổi
2. Trình trợ giúp bên trong được thả nổi (nó kéo dài nhiều như nội dung)
3. Người trợ giúp bên trong được đẩy sang phải 50% (bên trái của nó thẳng hàng với trung tâm của người trợ giúp bên ngoài)
4. Nội dung được kéo sang trái 50% (trung tâm của nó thẳng hàng với bên trái của người trợ giúp bên trong)
5. Trình trợ giúp bên ngoài được đặt để ẩn tràn

.ca-outer {
  overflow: hidden;
  background: #FFC;
}
.ca-inner {
  float: left;
  position: relative;
  left: 50%;
  background: #FDD;
}
.content {
  float: left;
  position: relative;
  left: -50%;
  background: #080;
}
/* examples */
div.content > div {
  float: left;
  margin: 10px;
  width: 100px;
  height: 100px;
  background: #FFF;
}
ul.content {
  padding: 0;
  list-style-type: none;
}
ul.content > li {
  margin: 10px;
  background: #FFF;
}

<div class="ca-outer">
  <div class="ca-inner">
    <div class="content">
      <div>Box 1</div>
      <div>Box 2</div>
      <div>Box 3</div>
    </div>
  </div>
</div>
<hr>
<div class="ca-outer">
  <div class="ca-inner">
    <ul class="content">
      <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
      <li>Nullam efficitur nulla in libero consectetur dictum ac a sem.</li>
      <li>Suspendisse iaculis risus ut dapibus cursus.</li>
    </ul>
  </div>
</div>

display: inline-block;sẽ không hoạt động trong bất kỳ trình duyệt IE nào. Đây là những gì tôi đã sử dụng.

// change the width of #boxContainer to 
// 1-2 pixels higher than total width of the boxes inside:

#boxContainer {         
    width: 800px; 
    height: auto;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

#Box{
    width: 240px; 
    height: 90px;
    background-color: #FFF;
    float: left;
    margin-left: 10px;
    margin-right: 10px;
}

Giải pháp:

<!DOCTYPE HTML>
<html>
    <head>
        <title>Knowledge is Power</title>
        <script src="js/jquery.js"></script>
        <script type="text/javascript">
        </script>
        <style type="text/css">
            #outer {
                text-align:center;
                width:100%;
                height:200px;
                background:red;
            }
            #inner {
                display:inline-block;
                height:200px;
                background:yellow;
            }
        </style>
    </head>
    <body>
        <div id="outer">
            <div id="inner">Hello, I am Touhid Rahman. The man in Light</div>
        </div>
    </body>
</html>

Trong trường hợp của tôi, tôi không thể nhận được câu trả lời của @Sampson để làm việc cho tôi, tốt nhất là tôi có một cột duy nhất tập trung vào trang. Tuy nhiên, trong quá trình đó, tôi đã học được cách float thực sự hoạt động và tạo ra giải pháp này. Về cốt lõi, cách khắc phục rất đơn giản nhưng khó tìm thấy bằng chủ đề này đã có hơn 146 nghìn lượt xem tại thời điểm đăng bài này mà không đề cập đến.

Tất cả những gì cần thiết là tổng số chiều rộng không gian màn hình mà bố cục mong muốn sẽ chiếm sau đó làm cho bố mẹ có cùng chiều rộng và áp dụng lề: tự động. Đó là nó!

Các yếu tố trong bố cục sẽ quyết định chiều rộng và chiều cao của div "bên ngoài". Lấy mỗi "myFloat" hoặc chiều rộng hoặc chiều cao của phần tử + đường viền của nó + lề và phần đệm của nó và thêm tất cả chúng lại với nhau. Sau đó thêm các yếu tố khác với nhau trong cùng một thời trang. Điều này sẽ cung cấp cho bạn chiều rộng cha mẹ. Tất cả chúng có thể có kích thước hơi khác nhau và bạn có thể làm điều này với ít hoặc nhiều yếu tố.

Ví dụ: (mỗi phần tử có 2 cạnh để đường viền, lề và phần đệm được nhân x2)

Vì vậy, một phần tử có chiều rộng 10px, viền 2px, lề 6px, phần đệm 3px sẽ trông như thế này: 10 + 4 + 12 + 6 = 32

Sau đó, cộng tất cả các chiều rộng tổng của phần tử của bạn lại với nhau.

Element 1 = 32
Element 2 = 24
Element 3 = 32
Element 4 = 24

Trong ví dụ này, chiều rộng cho div "bên ngoài" sẽ là 112.

.outer {
  /* floats + margins + borders = 270 */
  max-width: 270px;
  margin: auto;
  height: 80px;
  border: 1px;
  border-style: solid;
}

.myFloat {
    /* 3 floats x 50px = 150px */
    width: 50px;
    /* 6 margins x 10px = 60 */
    margin: 10px;
    /* 6 borders x 10px = 60 */
    border: 10px solid #6B6B6B;
    float: left;
    text-align: center;
    height: 40px;
}

<div class="outer">
  <div class="myFloat">Float 1</div>
  <div class="myFloat">Float 2</div>
  <div class="myFloat">Float 3</div>
</div>