programing

다른 디브 안에 3디브(좌/중심/우)를 정렬하는 방법은 무엇입니까?

css3 2023. 9. 12. 20:12

다른 디브 안에 3디브(좌/중심/우)를 정렬하는 방법은 무엇입니까?

컨테이너 디브 안에 디브 3개를 정렬하고 싶어요 이런 거요

[[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로 디브를 이렇게 배치합니다. (floats first)

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

P.S. 오른쪽, 왼쪽, 가운데로 뜰 수도 있습니다.중요한 것은 플로트가 "메인" 센터 부분보다 먼저 온다는 것입니다.

P.P.S. 당신은 종종 마지막으로 안에 들어가길 원합니다.#container 토막글:이글글:<div style="clear:both;"></div>하는 것입니다.#container기해지고을지고m만dfgrhssnyo쪽y을해te#center측면이 아래쪽으로 튀어나오게 할 수도 있습니다

Flexbox를 사용하여 세 디브를 수평으로 정렬

여기에 다른 디브 안에서 디브를 수평으로 정렬하는 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값을 합니다. 즉,는과은섯지다이다이ys지e:

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

모든 경우에 디브 세 명은 같은 선상에 있습니다.각 값에 대한 설명은 https://stackoverflow.com/a/33856609/3597276 을 참조하십시오.

플렉스박스의 이점:

  1. 최소 코드; 매우 효율적인
  2. 센터링은 수직과 수평 모두 단순하고 쉽습니다.
  3. 동일한 높이의 열은 단순하고 쉽습니다.
  4. 플렉스 요소 정렬을 위한 다중 옵션
  5. 반응이 좋습니다.
  6. 플렉스박스는 다양한 옵션을 제공하는 현대식(CSS3) 기법으로, 건물 배치를 위한 용도가 없었기 때문에 제한된 배치 용량을 제공하는 플로트나 테이블과는 달리 다양한 옵션을 제공합니다.

Flexbox에 대한 자세한 내용은 다음을 참조하십시오.

브라우저 지원: Flexbox는 IE < 10을 제외한 모든 주요 브라우저에서 지원됩니다.Safari 8 및 IE10과 같은 일부 최신 브라우저 버전에서는 벤더 접두사가 필요합니다.접두사를 빠르게 추가하려면 자동 수정기를 사용합니다.자세한 내용은 이 답변에서 확인하실 수 있습니다.

를 하여 할 도 하지 을 를 할 하지 하여 을 text-align: center;지와 a에 ae.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/

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

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

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>

[첫번째] [두번째]

[셋째]

따라서 완벽한 결과를 얻기 위해서는 이 모든 측면을 고려해야 합니다.

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

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. 플렉스 트릭 사용

.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. 플로트 트릭 사용

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

저는 바가 타이트하고 역동적인 것을 좋아합니다.CSS 3 & HTML 5용입니다.

  1. 첫째, Width를 100px로 설정하는 것은 제한적입니다.하지 마세요.

  2. 둘째, 컨테이너의 너비를 100%로 설정하면 내비게이션이나 크레딧/저작권 바와 같은 전체 앱에 대한 헤더/풋터 바로 사용할 수 있습니다.right: 0;대신에 그 시나리오는.

  3. id's(해시)를 사용하고 있습니다.#container,#left, 수업 대신에 (등).container,.left, 코드의 다른 곳에서 스타일 패턴을 반복하고 싶지 않다면 괜찮습니다.대신 수업을 이용하는 것을 고려하고 싶습니다.

  4. HTML의 경우 왼쪽, 가운데 및 오른쪽으로 순서를 바꿀 필요가 없습니다.display: inline-block;이를 수정하여 코드를 보다 깨끗하고 논리적으로 다시 순서대로 되돌립니다.

  5. 마지막으로 플로트를 모두 치워야 미래에 방해가 되지 않습니다.<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를 사용하는 경우 보너스 포인트 ;)

햄:

.container
  .left
  .center
  .right
  .clear

SAS:

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

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

브라우저 호환성 표 확인

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

코드 펜 링크

CSS 그리드는 작업을 쉽게 수행할 수 있습니다.

#container {
  display: grid;                   /* (1) a grid container */
  grid-auto-flow:column;           /* (2) column layout    */
  justify-content: space-between;  /* (3) align the columns*/
  background-color: lightyellow;
}
#container > div {
  width: 100px;
  height: 100px;
  border: 2px dashed red;
}
<div id="container">
  <div></div>
  <div></div>
  <div></div>
</div>

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;완벽한 중앙 정렬을 제공합니다.

JS Fiddle 데모

저는 이것을 단순화하고 컨테이너 없이 달성하기 위해 또 다른 시도를 했습니다.

HTML

<div class="box1">left side of the page</div>
<div class="box2">right side of the page</div>
<div class="box3">center of the page </div>

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에서 생방송으로 보실 수 있습니다.

부트스트랩 3을 사용하여 같은 폭의 3 div를 만듭니다(각 div에 대해 12열 레이아웃 4열).이렇게 하면 왼쪽/오른쪽 단면의 너비가 다르더라도(기둥의 공간이 넘치지 않는 경우) 중앙 영역의 중심을 유지할 수 있습니다.

https://stackoverflow.com/questions/26276224/npoi-vertical-alignment-center

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

CodePen

To create that structure without libraries I copied some rules from 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;
}

CopePen

If the left, center, and right DIVs have different widths, you can accomplish this as follows:

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

  #left {
    position: absolute;
    left: 0px;
  }

  #right {
    position: absolute;
    right: 0px;
  }

  #center {
    display: inline-block;
  }

센터 DIV가 텍스트인 경우에는#centerCSS.

Use CSS Grid

layout {
    display: grid;
    grid-template-columns: repeat(3,1fr);
}
start-column {
    justify-self: start;
}
center-column {
    justify-self: center;
}
end-column {
    justify-self: end;
}
<layout>
    <start-column>
        <button>Start</button>
    </start-column>
    <center-column>
        <p>Center Donec non urna ipsum. Nullam euismod, lacus ac malesuada varius, mauris erat ullamcorper erat, eget dignissim tortor felis et sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi faucibus turpis et augue dapibus bibendum.</p>
    </center-column>
    <end-column>
        <a href="#">End</a>
    </end-column>
</layout>

Here are the changes that I had to make to the accepted answer when I did this with an image as the centre element:

  1. 영상이 div 내에 포함되어 있는지 확인합니다(#center이 경우).만약 그렇지 않다면, 당신은 다음과 같이 설정해야 합니다.display로.block, 그리고 그것은 떠있는 요소들 사이의 공간에 상대적으로 중심을 잡는 것처럼 보입니다.

  2. Make sure to set the size of both the image and its container:

    #center {
    margin: 0 auto;
}

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

You can try this:

Your html code like this:

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

and your css code like this:

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

so, it's output should be get like this:

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

You've done it correctly, you only need to clear your floats. Simply add 

overflow: auto;

to your container class.

The easiest solution is to crate a table with 3 columns and center that table.

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 }

ReferenceURL : https://stackoverflow.com/questions/2603700/how-to-align-3-divs-left-center-right-inside-another-div

'programing' 카테고리의 다른 글

Expulent 모델 인스턴스의 기본 키 가져오기  (0) 2023.09.12
TFS에서 여러 작업 항목을 일괄 업데이트하는 방법  (0) 2023.09.12
npoi 수직 선형 중심  (0) 2023.09.12
Oracle - SQL - subselect로 삽입  (0) 2023.09.12
XMLHttpRequest Level 2 - 업로드가 완료되었는지 여부 확인  (0) 2023.09.12

'programing'의 다른글

  • 현재글다른 디브 안에 3디브(좌/중심/우)를 정렬하는 방법은 무엇입니까?

관련글

댓글

티스토리툴바