다른 div 내에서 부동 div 센터링

다른 질문을 검색했지만이 문제는 다른 몇 가지와 비슷해 보이지만 지금까지 본 적이없는 문제를 해결하지 못했습니다.

여러 다른 div가 포함 된 div가 있으며 각 div는 왼쪽에 떠 있습니다. 이 div에는 각각 사진과 캡션이 포함되어 있습니다. 내가 원하는 것은 사진 그룹이 포함 된 div 안에 중심을 두는 것입니다.

아래의 코드에서 볼 수 있듯이, 둘 다 사용 해봤 overflow:hidden및 margin:x auto부모 div의에, 나는 또한을 추가 한 clear:both사진 후 (다른 주제에서 제안). 아무것도 차이가없는 것 같습니다.

감사합니다. 제안 해 주셔서 감사합니다.

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

먼저 float내부 div의 속성을 제거하십시오 . 그런 다음 text-align: center메인 아우터를 착용 하십시오 div. 그리고 내부 div에는을 사용하십시오 display: inline-block. 그들에게도 폭을 명시하는 것이 현명 할 수 있습니다.

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

로 인 flexbox 당신은 쉽게 수평 (수직) 센터는 수 어린이 떠 사업부 내부.

따라서 간단한 마크 업이있는 경우 :

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

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

(이것은 (예상되고 바람직하지 않은) 결과입니다 )

이제 다음 규칙을 랩퍼에 추가하십시오.

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

그리고 떠 다니는 아이들은 중심에 정렬됩니다 ( DEMO )

재미를 위해 수직 정렬을 얻으려면 다음을 추가하십시오.

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

데모

상대 위치를 사용하고 오른쪽으로 플로팅하여 위의 내용을 달성했습니다.

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

JSFiddle : http://jsfiddle.net/MJ9yp/

이것은 IE8 이상에서 작동하지만 이전에는 놀랍지 않습니다 (놀랍고 놀랍습니다!)

안타깝게도이 방법의 출처를 기억하지 못하므로 원래 저자에게 신용을 줄 수 없습니다. 다른 사람이 있다면 링크를 게시하십시오!

다음 솔루션은 인라인 블록을 사용하지 않습니다. 그러나 두 개의 도우미 div가 필요합니다.

1. 내용이 뜬다
2. 내부 도우미가 플로팅됩니다 (내용만큼 늘어남)
3. 내부 도우미가 오른쪽으로 50 % 밀립니다 (왼쪽이 외부 도우미의 중심에 정렬 됨)
4. 내용이 왼쪽으로 50 % 당겨집니다 (중앙이 내부 도우미의 왼쪽에 맞춰 짐)
5. 외부 도우미가 오버플로를 숨기도록 설정되었습니다.

.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;IE 브라우저에서는 작동하지 않습니다. 여기 내가 사용한 것이 있습니다.

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

해결책:

<!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>

제 경우에는 @Sampson이 저에게 도움을 줄 수있는 답변을 얻을 수 없었습니다. 최고의 경우 페이지 중앙에 단일 열이 있습니다. 그러나 그 과정에서 플로트가 실제로 어떻게 작동 하고이 솔루션을 만들 었는지 배웠습니다. 핵심은 픽스는 매우 간단하지만 언급하지 않고이 게시물 당시 146k 이상의 조회수를 가진이 스레드에서 분명하게 찾기가 어렵습니다.

원하는 레이아웃이 차지할 화면 공간 너비의 총계를 계산 한 다음 부모를 동일한 너비로 만들고 margin : auto를 적용하면됩니다. 그게 다야!

레이아웃의 요소는 "외부"div의 너비와 높이를 나타냅니다. 각 "myFloat"또는 요소의 너비 또는 높이 + 테두리 + 여백 및 패딩을 모두 함께 추가하십시오. 그런 다음 다른 요소를 같은 방식으로 함께 추가하십시오. 부모 너비를 제공합니다. 크기는 모두 다를 수 있으며 더 적거나 더 많은 요소로이 작업을 수행 할 수 있습니다.

예 (각 요소에 2 개의면이 있으므로 테두리, 여백 및 패딩에 x2가 곱 해짐)

따라서 너비가 10px, 경계선 2px, 여백 6px, 패딩 3px 인 요소는 다음과 같습니다. 10 + 4 + 12 + 6 = 32

그런 다음 요소의 총 너비를 모두 더하십시오.

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

이 예에서 "외부"div의 너비는 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>