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

392

컨테이너 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]

팁이 있습니까?

html  css  flexbox  alignment  css-float 
— Serg
소스
1
컨테이너가 너비가 300px보다 좁아지면 overflow 속성을 설정하지 않으면 발생합니다.
— inkedmn
Flexbox 및 그리드 : jsfiddle.net/w0s4xmc0/12963
— Manoj Kumar
그냥 메모 - 각 열의 콘텐츠의 무리와 함께 inkedmn의 코멘트 @ 당으로서, 나는 그들 모두가없이 컨테이너 폭에 제대로 정렬 할 수 없었다 overflow: hidden;온 center열입니다. 그런 다음 페이지 상단에 3 열이 모두있을 때 작은 장치에 대한 미디어 쿼리 overflow: hidden;에서 중간 열 (대형 장치의 오른쪽 열)이 필요했습니다. 그렇지 않으면 높이가 없었고 세로로 중앙에 있지 않았습니다. 상단과 하단 행 사이.
— Chris L

답변:

364

해당 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.

— dkamins
소스
컨테이너가 100 %가 아니라면 어떻게 하시겠습니까? 여기에 이와 같은 것을 시도하고 있다면, div가 컨테이너의 오른쪽에 머무르기를 원하지만 페이지의 오른쪽에 떠 있습니다.
— Tiago
@Tiago : 수레가 div 안에 있으면 div에 제약을 유지해야합니다. 컨테이너 너비를로 설정하여 너비를 확인하십시오 border:solid. 100 % 인 경우 다른 div로 묶어 페이지 안에 배치하십시오.
— James P.
또한-크기 조정 가능한 컨테이너 안에 넣을 경우 오른쪽 부동 div가 아래로 밀리지 않도록 컨테이너의 최소 너비를 설정하십시오.
— Tapefreak
6
이 답변은 6 세 이상입니다. 2016 년에는 정답이 flexbox입니다.
1
@ torazaburo, 아마도 둘 이상의 정답이있을 수 있습니다. 동일한 지점에 도달하는 많은 방법이 있습니다.이 경우, 내가 사용하는 프레임 워크가 이미 요소에 float로 왼쪽과 오른쪽을 설정하기 때문에이 솔루션을 사용해야합니다. 끝에 중심 요소를 추가하는 것은 나에게 완벽합니다.
— 닌자 코딩
128

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/

— Fruechtemuesli
소스
1
이것은 너무 빨리 접지 않고 창 너비에 따라 올바르게 크기를 조정하는 유일한 솔루션입니다.
— Jared Sealey
2
왼쪽과 오른쪽 크기가 같을 때 적합합니다. 그렇지 않으면 센터가 중앙에 있지 않습니다.
— mortalis
126

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 방문에 대해 자세히 알아 보려면

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

— 마이클 벤자민
소스
7
플렉스는 플로트를 사용하는 것보다 훨씬 낫습니다.
— Faizan Akram Dar
1
여기와 링크 된 게시물에 대한 훌륭한 설명! 참고 사항 : 컨테이너 div 내부의 플렉스 항목으로 "span"요소를 사용하면 firefox에서 작동했지만 javafx 기반 브라우저 (webview)에서는 작동하지 않았습니다. "스팬"을 "divs"로 변경하면 둘 다 작동했습니다.
— Ashok
Internet Explorer 10 및 이전 버전은 justify-content 속성을 지원하지 않습니다
— D.Snap
1
불행히도 이것은 같은 너비의 항목에서만 작동합니다. stackoverflow.com/questions/32551291/…
— 처리
훌륭합니다. 여기에서 모든 솔루션을 사용해 보았으며 이것이 가장 좋습니다!
— Nico Müller
22

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

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

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>
스 니펫 확장

[첫번째 두번째]

[제삼]

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

— 라 지프 핑 갈레
소스
13

나는 바가 빡빡하고 역동적입니다. 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; }
}
— 에릭 완 시크
소스
12

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

01. 테이블 트릭 사용

코드 스 니펫 표시

02. Flex Trick 사용

코드 스 니펫 표시

03. Float Trick 사용

코드 스 니펫 표시

— 산토스 칼세
소스
11

이것은 <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 */
}

산출:

코드 스 니펫 표시

— 마노이 쿠마르
소스
4

트위터 부트 스트랩으로 : 

<p class="pull-left">Left aligned text.</p>
<p class="pull-right">Right aligned text.</p>
<p class="text-center">Center aligned text.</p>
— 카.
소스
3

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

코드 펜 링크

— 프 루비 P
소스
2

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

— 칼리드 파한
소스
텍스트 요소의 크기가 거의 같고 하나의 텍스트를 더 길게 만들고 #center div가 더 이상 가운데에 있지 않기 때문에 예제에서 div를 가운데에 배치합니다. jsfiddle.net/3a4Lx239
— Kai Noack
1

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

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 에서 라이브로 볼 수 있습니다

— 사용자 15100
소스
1

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

코펜

— 치명적
소스
0

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

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

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

    #center {
    margin: 0 auto;
}

#center, #center > img {
    width: 100px;
    height: auto;
}
— 샘
소스
0

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

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]]
— 키샨 라다 디야
소스
-1 
.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
— 수박
소스
2
스택 오버플로에 오신 것을 환영합니다! 이 코드가 OP에 도움이되는 이유에 대한 설명을 추가하십시오. 이는 향후 시청자가 배울 수있는 답변을 제공하는 데 도움이됩니다. 자세한 내용 은 답변 방법을 참조하십시오 .
— Heretic Monkey
-3

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

overflow: auto;

컨테이너 클래스에.

— 무스타파 제 갈라
소스
-6

가장 쉬운 해결책은 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;
}
— 셈 비소 F. 마카티 니
소스
-10 
#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 }
— 바이트
소스
2
코드 블록 만 게시하는 대신 이 코드로 인해 문제가 해결되는 이유 를 설명 하십시오 . 설명이 없으면 대답이 아닙니다.
— Martijn Pieters
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.