다른 div 안에 3 개의 div (왼쪽 / 가운데 / 오른쪽)를 정렬하는 방법은 무엇입니까?

컨테이너 div 안에 3 개의 div를 정렬하고 싶습니다.

[[LEFT]       [CENTER]        [RIGHT]]

컨테이너 div의 너비는 100 % (설정 너비 없음)이며 컨테이너의 크기를 조정 한 후 가운데 div가 가운데에 유지되어야합니다.

그래서 나는 설정했다 :

#container{width:100%;}
#left{float:left;width:100px;}
#right{float:right;width:100px;}
#center{margin:0 auto;width:100px;}

그러나 그것은 다음과 같습니다 :

[[LEFT]       [CENTER]              ]
                              [RIGHT]

팁이 있습니까?

해당 CSS로 div를 다음과 같이 넣으십시오 (floats first) :

<div id="container">
  <div id="left"></div>
  <div id="right"></div>
  <div id="center"></div>
</div>

추신 당신은 또한 떠 다니고 나서 떠 다닐 수 있습니다. 중요한 것은 플로트가 "메인"중앙 섹션 앞에옵니다.

PPS#container 이 스 니펫 내부에서 마지막으로 원할 경우가 있습니다. 이 스 니펫 은 높이를 가져 가지 않고 측면이 바닥에서 튀어 나오는 대신 양쪽 측면 플로트를 포함 <div style="clear:both;"></div>하도록 #container세로로 확장 됩니다 #center.

HTML 구조를 변경하지 않으려면 text-align: center;랩퍼 요소와 display: inline-block;중심 요소 에 추가 하여 수행 할 수도 있습니다 .

#container {
    width:100%;
    text-align:center;
}

#left {
    float:left;
    width:100px;
}

#center {
    display: inline-block;
    margin:0 auto;
    width:100px;
}

#right {
    float:right;
    width:100px;
}

라이브 데모 : http://jsfiddle.net/CH9K8/

Flexbox를 사용하여 3 개의 Div를 가로로 정렬

다음은 다른 div 내부에서 div를 가로로 정렬하는 CSS3 메서드입니다.

#container {
  display: flex;                  /* establish flex container */
  flex-direction: row;            /* default value; can be omitted */
  flex-wrap: nowrap;              /* default value; can be omitted */
  justify-content: space-between; /* switched from default (flex-start, see below) */
  background-color: lightyellow;
}
#container > div {
  width: 100px;
  height: 100px;
  border: 2px dashed red;
}

<div id="container">
  <div></div>
  <div></div>
  <div></div>
</div>

jsFiddle

이 justify-content속성에는 5 가지 값이 있습니다.

• flex-start (기본)
• flex-end
• center
• space-between
• space-around

모든 경우에 3 개의 div는 같은 줄에 있습니다. 각 값에 대한 설명은 https://stackoverflow.com/a/33856609/3597276을 참조하십시오.

flexbox의 장점 :

1. 최소한의 코드; 매우 효율적
2. 수직 및 수평 센터링은 간단하고 쉽습니다.
3. 동일한 높이의 열은 간단하고 쉽습니다.
4. 플렉스 요소 정렬을위한 여러 옵션
5. 반응이 좋다
6. 레이아웃을 빌드하기위한 것이 아니기 때문에 제한된 레이아웃 용량을 제공하는 플로트 및 테이블과 달리 flexbox는 광범위한 옵션을 갖춘 최신 (CSS3) 기술입니다.

flexbox 방문에 대해 자세히 알아 보려면

• 플렉스 아이템을 정렬하는 방법
• CSS 플렉시블 박스 사용 ~ MDN
• Flexbox에 대한 완전한 안내서 ~ CSS-Tricks
• Flexbox는 무엇입니까?! ~ YouTube 비디오 자습서

브라우저 지원 : Flexbox는 IE <10을 제외한 모든 주요 브라우저에서 지원됩니다 . Safari 8 및 IE10과 같은 일부 최신 브라우저 버전에는 공급 업체 접두사가 필요합니다 . 접두사를 빠르게 추가하려면 Autoprefixer를 사용 하십시오 . 이 답변에 대한 자세한 내용 .

부동 속성은 실제로 텍스트를 정렬하는 데 사용되지 않습니다.

이 속성은 요소를 오른쪽이나 왼쪽 또는 가운데에 추가하는 데 사용됩니다.

div > div { border: 1px solid black;}

<html>
     <div>
         <div style="float:left">First</div>
         <div style="float:left">Second</div>
         <div style="float:left">Third</div>

         <div style="float:right">First</div>
         <div style="float:right">Second</div>
         <div style="float:right">Third</div>
     </div>
</html>

위한 float:left출력 것[First][second][Third]

위한 float:right출력 것[Third][Second][First]

즉 float => left 속성은 다음 요소를 이전 요소의 왼쪽에 추가합니다.

또한 부모 요소의 너비를 고려해야합니다. 자식 요소의 너비 합계가 부모 요소의 너비를 초과하면 다음 요소가 다음 줄에 추가됩니다

 <html>
     <div style="width:100%">
       <div style="float:left;width:50%">First</div>
       <div style="float:left;width:50%">Second</div>
       <div style="float:left;width:50%">Third</div>
     </div>
</html>

[첫번째 두번째]

[제삼]

완벽한 결과를 얻으려면 이러한 모든 측면을 고려해야합니다.

나는 바가 빡빡하고 역동적입니다. CSS 3 및 HTML 5 용입니다.

1. 먼저 너비를 100px로 설정하는 것이 제한적입니다. 하지마

2. 둘째, 컨테이너 너비를 100 %로 설정하면 내비게이션 또는 크레딧 / 저작권 표시 줄과 같은 전체 앱의 머리글 / 바닥 글 표시 줄에 대해 이야기 할 때까지 정상적으로 작동합니다. right: 0;해당 시나리오에 대신 사용하십시오 .

3. 당신은 ID를 사용하고 있습니다 (해시 #container , #left대신 클래스 (의 등) .container, .left코드에서 다른 스타일의 패턴을 반복하지 않으려면, 괜찮습니다, 등). 대신 클래스를 사용하는 것이 좋습니다.

4. HTML의 경우 왼쪽, 가운데 및 오른쪽 순서를 바꿀 필요가 없습니다. display: inline-block;이 문제를 해결하여 코드를 더 깨끗하고 논리적으로 다시 반환하십시오.

5. 마지막으로 float을 모두 지워서 future와 엉망이되지 않도록하십시오 <div>. 당신은 이것을 가지고clear: both;

요약:

HTML :

<div class="container">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
  <div class="clear"></div>
</div>

CSS :

.container {right: 0; text-align: center;}

.container .left, .container .center, .container .right { display: inline-block; }

.container .left { float: left; }
.container .center { margin: 0 auto; }
.container .right { float: right; }
.clear { clear: both; }

HAML 및 SASS를 사용하는 경우 보너스 포인트;)

HAML :

.container
  .left
  .center
  .right
  .clear

SASS :

.container {
  right: 0;
  text-align: center;

  .left, .center, .right { display: inline-block; }

  .left { float: left; }
  .center { margin: 0 auto; }
  .right { float: right; }
  .clear { clear: both; }
}

요소를 정렬하는 데 사용할 수있는 몇 가지 트릭이 있습니다.

01. 테이블 트릭 사용

.container{
  display:table;
 }

.left{
  background:green;
  display:table-cell;
  width:33.33vw;
}

.center{
  background:gold;
  display:table-cell;
  width:33.33vw;
}

.right{
  background:gray;
  display:table-cell;
  width:33.33vw;
}

<div class="container">
  <div class="left">
    Left
  </div>
  <div class="center">
    Center
  </div>
  <div class="right">
    Right
  </div>
</div>

02. Flex Trick 사용

.container{
  display:flex;
  justify-content: center;
  align-items: center;
   }

.left{
  background:green;
  width:33.33vw;
}

.center{
  background:gold;
   width:33.33vw;
}

.right{
  background:gray;
   width:33.33vw;
}

<div class="container">
  <div class="left">
    Left
  </div>
  <div class="center">
    Center
  </div>
  <div class="right">
    Right
  </div>
</div>

03. Float Trick 사용

.left{
  background:green;
  width:100px;
  float:left;
}

.center{
   background:gold;
   width:100px;
   float:left;
}

.right{
   background:gray;
   width:100px;
   float:left;
}

<div class="container">
  <div class="left">
    Left
  </div>
  <div class="center">
    Center
  </div>
  <div class="right">
    Right
  </div>
</div>

이것은 <IE9거의 모든 브라우저 에서 미래에 ( 완전히 죽었을 때 ) 사용될 기능인 CSS3 Flexbox를 사용하여 쉽게 수행 할 수 있습니다 .

브라우저 호환성 표 확인

HTML

<div class="container">
  <div class="left">
    Left
  </div>
  <div class="center">
    Center
  </div>
  <div class="right">
    Right
  </div>
</div>

CSS

.container {
  display: flex;
  flex-flow: row nowrap; /* Align on the same line */
  justify-content: space-between; /* Equal margin between the child elements */
}

산출:

.container {
  display: flex;
  flex-flow: row nowrap; /* Align on the same line */
  justify-content: space-between; /* Equal margin between the child elements */
}

/* For Presentation, not needed */

.container > div {
  background: #5F85DB;
  padding: 5px;
  color: #fff;
  font-weight: bold;
  font-family: Tahoma;
}

<div class="container">
  <div class="left">
    Left
  </div>
  <div class="center">
    Center
  </div>
  <div class="right">
    Right
  </div>
</div>

트위터 부트 스트랩으로 :

<p class="pull-left">Left aligned text.</p>
<p class="pull-right">Right aligned text.</p>
<p class="text-center">Center aligned text.</p>

html의 순서를 유지하고 flex를 사용하지 않으려면 가능한 대답.

HTML

<div class="a">
  <div class="c">
    the 
  </div>
  <div class="c e">
    jai ho 
  </div>
  <div class="c d">
    watsup
  </div>
</div>

CSS

.a {
  width: 500px;
  margin: 0 auto;
  border: 1px solid red;
  position: relative;
  display: table;
}

.c {
  display: table-cell;
  width:33%;
}

.d {
  text-align: right;
}

.e {
  position: absolute;
  left: 50%;
  display: inline;
  width: auto;
  transform: translateX(-50%);
}

코드 펜 링크

HTML :

<div id="container" class="blog-pager">
   <div id="left">Left</div>
   <div id="right">Right</div>
   <div id="center">Center</div>    
</div>

CSS :

 #container{width:98%; }
 #left{float:left;}
 #center{text-align:center;}
 #right{float:right;}

text-align:center; 완벽한 중심 정렬을 제공합니다.

JSFiddle 데모

컨테이너를 필요로하지 않고 이것을 단순화하고 달성하려는 또 다른 시도를했습니다.

HTML

.box1 {
  background-color: #ff0000;
  width: 200px;
  float: left;
}

.box2 {
  background-color: #00ff00;
  width: 200px;
  float: right;
}

.box3 {
  background-color: #0fffff;
  width: 200px;
  margin: 0 auto;
}

CSS

  .box1 {
  background-color: #ff0000;
  width: 200px;
  float: left;
}

.box2 {
  background-color: #00ff00;
  width: 200px;
  float: right;
}

.box3 {
  background-color: #0fffff;
  width: 200px;
  margin: 0 auto;
}

JSFiddle 에서 라이브로 볼 수 있습니다

Bootstrap 3 사용 동일한 너비의 3 div를 만듭니다 (12 열 레이아웃에서 각 div에 대해 4 열). 이렇게하면 왼쪽 / 오른쪽 섹션의 너비가 다른 경우에도 열 영역이 오버플로되지 않는 경우 중앙 영역을 중앙에 유지할 수 있습니다.

HTML :

<div id="container">
  <div id="left" class="col col-xs-4 text-left">Left</div>
  <div id="center" class="col col-xs-4 text-center">Center</div>
  <div id="right" class="col col-xs-4 text-right">Right</div>
</div>

CSS :

#container {
  border: 1px solid #aaa;
  margin: 10px;
  padding: 10px;
  height: 100px;
}
.col {
  border: 1px solid #07f;
  padding: 0;
}

코드 펜

라이브러리없이 해당 구조를 만들려면 Bootstrap CSS에서 일부 규칙을 복사했습니다.

HTML :

<div id="container">
  <div id="left" class="col">Left</div>
  <div id="center" class="col">Center</div>
  <div id="right" class="col">Right</div>
</div>

CSS :

* {
  box-sizing: border-box;
}
#container {
  border: 1px solid #aaa;
  margin: 10px;
  padding: 10px;
  height: 100px;
}
.col {
  float: left;
  width: 33.33333333%;
  border: 1px solid #07f;
  padding: 0;
}
#left {
  text-align: left;
}
#center {
  text-align: center;
}
#right {
  text-align: right;
}

코펜

다음은 이미지 를 중심 요소로 사용하여 허용 된 답변에 대한 변경 사항입니다 .

1. 이미지가 div 안에 포함되어 있는지 확인하십시오 ( #center이 경우). 그렇지 않은 경우 다음으로 설정 display해야합니다.block 하며 플로팅 된 요소 사이의 공간을 중심으로하는 것처럼 보입니다.

2. 이미지 와 컨테이너 의 크기를 설정하십시오 .

   #center {
       margin: 0 auto;
   }
   
   #center, #center > img {
       width: 100px;
       height: auto;
   }

당신은 이것을 시도 할 수 있습니다 :

html 코드는 다음과 같습니다.

<div id="container">
  <div id="left"></div>
  <div id="right"></div>
  <div id="center"></div>
</div>

그리고 당신의 CSS 코드는 다음과 같습니다 :

#container{width:100%;}
#left{float:left;width:100px;}
#right{float:right;width:100px;}
#center{margin:0 auto;width:100px;}

따라서 출력은 다음과 같아야합니다.

[[LEFT]       [CENTER]        [RIGHT]]

.processList
  text-align: center
  li
  .leftProcess
    float: left
  .centerProcess
    float: none
    display: inline-block
  .rightProcess
    float: right

html
ul.processList.clearfix
  li.leftProcess

li.centerProcess
li.rightProcess

당신은 그것을 올바르게했습니다, 당신은 당신의 수레를 지울 필요가 있습니다. 간단히 추가

overflow: auto; 

컨테이너 클래스에.

가장 쉬운 해결책은 3 개의 열이있는 테이블을 상자에 놓고 그 테이블을 중앙에 배치하는 것입니다.

html :

 <div id="cont">
        <table class="aa">
            <tr>
                <td>
                    <div id="left">
                        <h3 class="hh">Content1</h3>
                        </div>
                    </td>
                <td>
                    <div id="center">
                        <h3 class="hh">Content2</h3>
                        </div>
                 </td>
                <td>
                    <div id="right"><h3 class="hh">Content3</h3>
                        </div>
                </td>
            </tr>
        </table>
    </div>

CSS :

#cont 
{
  margin: 0px auto;    
  padding: 10px 10px;
}

#left
{    
  width: 200px;
  height: 160px;
  border: 5px solid #fff;
}

#center
{
  width: 200px;
  height: 160px;
  border: 5px solid #fff;
}

#right
{
  width: 200px;
  height: 160px;
  border: 5px solid #fff;
}

#warpcontainer  {width:800px; height:auto; border: 1px solid #000; float:left; }
#warpcontainer2 {width:260px; height:auto; border: 1px solid #000; float:left; clear:both; margin-top:10px }