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

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

---

In my case, I could not get the answer by @Sampson to work for me, at best I got a single column centered on the page. In the process however, I learned how the float actually works and created this solution. At it's core the fix is very simple but hard to find as evident by this thread which has had more than 146k views at the time of this post without mention.

All that is needed is to total the amount of screen space width that the desired layout will occupy then make the parent the same width and apply margin:auto. That's it!

The elements in the layout will dictate the width and height of the "outer" div. Take each "myFloat" or element's width or height + its borders + its margins and its paddings and add them all together. Then add the other elements together in the same fashion. This will give you the parent width. They can all be somewhat different sizes and you can do this with fewer or more elements.

Ex.(each element has 2 sides so border, margin and padding get multiplied x2)

So an element that has a width of 10px, border 2px, margin 6px, padding 3px would look like this: 10 + 4 + 12 + 6 = 32

Then add all of your element's totaled widths together.

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

In this example the width for the "outer" div would be 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>

참고URL : https://stackoverflow.com/questions/1269245/centering-floating-divs-within-another-div