Programing

다른 div 안에 div를 세로로 가운데에 맞추기

lottogame 2020. 2. 11. 22:18
반응형

다른 div 안에 div를 세로로 가운데에 맞추기

이 질문에는 이미 답변이 있습니다.

다른 div 안에 추가 된 div를 가운데에 배치하고 싶습니다.

<div id="outerDiv">
    <div id="innerDiv">
    </div>
</div>

이것은 현재 사용중인 CSS입니다.

    #outerDiv{
        width: 500px;
        height: 500px;
        position:relative;
    }

    #innerDiv{
        width: 284px;
        height: 290px;
        position:absolute;
        top: 50%;
        left:50%;
        margin-top: -147px;
        margin-left: -144px;
    }

당신이 볼 수 있듯이, 지금 사용하는 방법은 폭과 높이의 값에 따라 달라집니다 innerDiv.If 너비 / 높이 변경, 나는 수정해야합니다 margin-top및 margin-leftvalues.Is이 내가 중심을 사용할 수있는 일반적인 솔루션 innerDiv에 관계없이 항상의 크기?

사용 margin:auto하면 innerDiv를 가로로 가로로 정렬 할 수 있다는 것을 알았습니다. 그러나 세로로 세로 정렬은 어떻습니까?

tl; dr

가운데 정렬 작업은 세로로 정렬되지만 table-cell부모 요소와 inline-block자식 요소 를 사용해야 합니다 .

이 솔루션은 IE6 & 7에서 작동하지 않습니다.
귀하의 솔루션이 더 안전한 방법입니다.
그러나 CSS3 및 HTML5로 질문에 태그를 지정했기 때문에 현대적인 솔루션을 사용하는 것이 마음에 들지 않는다고 생각했습니다.

클래식 솔루션 (테이블 레이아웃)

이것이 내 원래의 대답이었습니다. 여전히 잘 작동하며 가장 광범위한 지원 솔루션입니다. 테이블 레이아웃은 렌더링 성능에 영향을 미치 므로보다 현대적인 솔루션 중 하나를 사용하는 것이 좋습니다.

여기에 예가 있습니다

테스트 대상 :

  • FF3.5 +
  • FF4 +
  • 사파리 5+
  • 크롬 11 이상
  • IE9 +

HTML

<div class="cn"><div class="inner">your content</div></div>

CSS

.cn {
  display: table-cell;
  width: 500px;
  height: 500px;
  vertical-align: middle;
  text-align: center;
}

.inner {
  display: inline-block;
  width: 200px; height: 200px;
}

최신 솔루션 (변형)

변환은 이제 상당히 잘 지원 되므로 더 쉬운 방법이 있습니다.

CSS

.cn {
  position: relative;
  width: 500px;
  height: 500px;
}

.inner {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 200px;
  height: 200px;
}

데모

♥ 내가 좋아하는 현대적인 솔루션 (flexbox)

나는 flexbox를 점점 더 많이 사용하기 시작 했으며 지금도 잘 지원되고 있습니다.

CSS

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

데모

더 많은 예제와 가능성 : 한 페이지에서 모든 방법을 비교

이 수평 및 수직 센터링을 달성하는 또 다른 방법은 다음과 같습니다.

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

( 참조 )

다른 방법은 변환 변환을 사용하는 것입니다

외부 사업부는 설정해야합니다 position에 relative나 fixed, 그리고 내부 사업부는 설정해야 position하는 absolute, top그리고 left에 50%와 적용 transform: translate(-50%, -50%).

div.cn {
    position: relative;
    width: 200px;
    height: 200px;
    background: gray;
    text-align: center;
}

div.inner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    -webkit-transform: translate(-50%, -50%);  
    transform: translate(-50%, -50%);   
    background: red;
  
}
<div class="cn">
    <div class="inner">
        test
    </div>
</div>

테스트 대상 :

  • 오페라 24.0 (최소 12.1)
  • Safari 5.1.7 (-webkit- 접두사가있는 최소 4)
  • Firefox 31.0 (접두사가없는 16부터 -moz- 접두사가있는 최소 3.6)
  • Chrome 36 (접두사가없는 36에서 -webkit- 접두사가있는 최소 11)
  • IE 11, 10 (접두사가없는 10에서 -ms- 접두사가있는 최소 9)
  • 더 많은 브라우저를 사용할 수 있습니까?

3 줄의 CSS만으로 수직 정렬

HTML

<div class="parent-of-element">

    <div class="element">
        <p>Hello</p>
    </div>

</div>

가장 간단한

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

CSS

.parent-of-element {
   position: relative;
   height: 500px;
   /* or height: 73.61% */
   /* or height: 35vh */
   /* or height: ANY HEIGHT */
}

.element {
  position: absolute;
  top: 50%;

  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

shouldiprefix 에 따르면 이것이 필요한 유일한 접두사입니다.

요소의 부모에 높이 또는 세로 크기를 확장하는 일부 내용이있는 경우 .parent-of-element의 'height'속성 값으로 %를 사용할 수도 있습니다.

작성하기 어렵고 유지하기 어려운 CSS (주의 깊은 브라우저 간 유효성 검사가 필요함)로 매듭을 묶는 대신 CSS를 포기하고 놀랍도록 간단한 HTML 1.0을 사용하는 것이 훨씬 좋습니다.

<table id="outerDiv" cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td valign="middle" id="innerDiv">
        </td>
    </tr>
</table>

이것은 원래의 포스터가 원하는 모든 것을 달성하며 견고하고 유지 보수가 가능합니다.

개인적으로 숨겨진 의사 요소를 사용하여 외부 컨테이너의 전체 높이에 걸쳐 있고 다른 내용과 수직으로 정렬하는 트릭을 선호합니다. Chris Coyier는이 기술에 대한 훌륭한 기사를 가지고 있습니다. http://css-tricks.com/centering-in-the-unknown/ 이것 의 큰 장점은 확장 성입니다. 컨텐츠의 높이를 알 필요가 없으며 컨텐츠가 커지거나 줄어드는 것에 대해 걱정할 필요가 없습니다. 이 솔루션은 :)로 확장됩니다.

다음은 필요한 모든 CSS와 실제 예제가 포함 된 바이올린입니다. http://jsfiddle.net/m5sLze0d/

.center:before {
    content: ""; /* Adding Extra Space Above Element */
    display: inline-block;
    height: 100%;
    margin-right: -0.3em;
    vertical-align: middle;
}
.center_element {
    display:inline-block;
    float:none;
    vertical-align:middle;
    white-space:normal;
    text-align:left;
}


#outerDiv{
        width: 500px;
        height: 500px;
        position:relative;
        background:grey;
        display:flex;
        justify-content:center;
        align-items:center;
    }

    #innerDiv{
    background:cyan;
        width: 284px;
        height: 290px;

        
    }
<div id="outerDiv">
<div id="innerDiv">Inner Div
</div>
</div>

위에서 언급 한 CSS 스타일을 추가하면됩니다. 모두 제일 좋다. 모든 질문에 대해 의견을 말

다른 div 안에 div 항목을 세로로 가운데 맞추기

컨테이너를로 설정 display:table한 다음 내부 항목을로 설정하십시오 display:table-cell. height용기에 a 를 설정 한 다음 vertical-align:middle내부 품목에 설정 하십시오. 이것은 IE9 시절까지 광범위하게 호환됩니다.

수직 정렬은 부모 컨테이너의 높이에 따라 다릅니다.

.cn
{
display:table;
height:80px;
background-color:#555;
}

.inner
{
display:table-cell;
vertical-align:middle;
color:#FFF;
padding-left:10px;
padding-right:10px;
}
<div class="cn">
  <div class="inner">Item 1</div>
  <div class="inner">Item 2</div>
</div>

당신은 때 height(자동) 설정되어 있지 않습니다; 내부 div에 패딩 (상단 및 하단)을 지정하여 세로 중앙으로 만들 수 있습니다.

<div>
    <div style="padding-top:20px;padding-bottom:20px">
    <!--content-->
    </div>
</div>

1 년이 지난 후 다음 솔루션을 사용 해 왔으며 IE 7 및 8에서도 작동합니다.

<style>
.outer {
    font-size: 0;
    width: 400px;
    height: 400px;
    background: orange;
    text-align: center;
    display: inline-block;
}

.outer .emptyDiv {
    height: 100%;
    background: orange;
    visibility: collapse;
}

.outer .inner {
    padding: 10px;
    background: red;
    font: bold 12px Arial;
}

.verticalCenter {
    display: inline-block;
    *display: inline;
    zoom: 1;
    vertical-align: middle;
}
</style>

<div class="outer">
    <div class="emptyDiv verticalCenter"></div>
    <div class="inner verticalCenter">
        <p>Line 1</p>
        <p>Line 2</p>
    </div>
</div>

이것은 나를 위해 작동합니다. 외부 div의 너비와 높이를 정의 할 수 있습니다.

코드는 다음과 같습니다.

.outer {
  position: relative;
  text-align: center;
  width: 100%;
  height: 150px; // Any height is allowed, also in %.
  background: gray;
}

.outer > div:first-child {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background: red;
}
<div class="outer">
  <div class="inner">
    Put here your text or div content!
  </div>
</div>

피들 링크 < http://jsfiddle.net/dGHFV/2515/ >

이 시도

   #outerDiv{
        width: 500px;
        height: 500px;
        position:relative;
        border:1px solid red;
    }

    #innerDiv{
        width: 284px;
        height: 290px;
        position:absolute;
        top: 0px;
        left:0px;
        right:0px;
        bottom:0px;
        margin:auto;
        border:1px solid green;
    }

위에 주어진 놀라운 답변을 읽은 후에도 여전히 이해하지 못한다면.

다음은 달성 할 수있는 간단한 두 가지 예입니다.

디스플레이 사용 : 테이블 셀

.wrapper {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 400px;
  height: 300px;
  border: 1px solid #555;
}

.container {
  display: inline-block;
  text-align: left;
  padding: 20px;
  border: 1px solid #cd0000;
}
<div class="wrapper">
  <div class="container">
    Center align a div using "<strong>display: table-cell</strong>"
  </div>
</div>

플렉스 박스 사용 (디스플레이 : flex)

.wrapper {
  display: flex;
  justify-content: center;
  width: 400px;
  height: 300px;
  border: 1px solid #555;
}

.container {
  align-self: center;
  padding: 20px;
  border: 1px solid #cd0000;
}
<div class="wrapper">
    <div class="container">
        Centering a div using "<strong>display: flex</strong>"
    </div>
</div>

참고 : 위에서 언급 한 구현을 사용하기 전에 display : table-cell 및 flex의 브라우저 호환성을 확인하십시오.

여기에 이미지 설명을 입력하십시오 100 % 작동합니다 

.div1{
  height: 300px;
  background: red;
  width: 100%;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  align-items: center;
}
.div2{
  background: green;
  height: 100px;
  width: 100%;
}

    <div class="div1">
      <div class="div2">
      sdfd
      </div>
    </div>

https://jsfiddle.net/Mangesh1556/btn1mozd/4/

height 값을 지정하지 않은 innerdiv의 경우 세로로 가운데에 맞추는 순수한 CSS 솔루션이 없습니다 .javascript 솔루션은 innerdiv의 offsetHeight를 얻을 수 있으며 style.marginTop을 계산합니다.

간단한 자바 스크립트 (jQuery) 블록으로이 작업을 수행 할 수 있습니다.

CSS :

#outerDiv{
    height:100%;
}

자바 스크립트 :

<script type="text/javascript">
    $(document).ready(function () {
        $("#innerDiv").css('top', ($(window).height() - $("#content").height()) / 2);
    });
</script>

내부 요소를 다음과 같이 정렬하십시오.

top: 0;
bottom: 0;
margin: auto;
display: table;

그리고 물론 :

position: absolute;

flex를 사용하여 CSS에서 세로 및 가로로 div를 가운데에 맞출 수 있습니다.

#outerDiv{
width: 500px;
    height: 500px;
    position:relative;
    border:1px solid #000;
    margin:0 auto;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;

    }

#innerDiv{
    width: 284px;
    height: 290px;
    border:1px solid #eee;

}

두 번째는 다음과 같습니다. 

    #outerDiv{
        width: 500px;
        height: 500px;
        position:relative;
        border:1px solid #000;
        }

        #innerDiv{
        max-width: 300px;
        height: 200px;
        background-color: blue;
        position:absolute; 
        left:0;
        right:0;
        top:0;
        bottom:0;
        margin:auto;
        border:1px solid #000;
        border-radius:4px;
    }

그리고 결과 HTML :

    <div id="outerDiv">
        <div id="innerDiv"></div>
    </div>

이것은 IE6으로 돌아갈 것입니다!

<!DOCTYPE html>IE6에서도 필요합니다! [IE6 기본 엄격 모드도 강제 실행합니다].

(물론 상자 색상은 데모 용입니다) 

    #outer{
        width: 205px;
        height: 205px;
        margin: auto; 
        text-align: center;
    }
    #inner{
        text-align: left;
        vertical-align: middle;
        width: 120px;
        height: 120px;
        display: inline-block;
   
    }
    #center{
        height: 100%; width:0px;
        vertical-align: middle;
        display: inline-block;
    }
    div {background: rgba(0,128,255,.6)}
<div id=outer>
    <div id=center></div><div id=inner> The inner DIV
    </div>
</div>

다른 div 안에 div를 세로로 가운데 맞추기

#outerDiv{
  width: 500px;
  height: 500px;
  position:relative;
  
  background-color: lightgrey;  
}

#innerDiv{
  width: 284px;
  height: 290px;
  
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%); /* IE 9 */
  -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */	
  
  background-color: grey;
}
<div id="outerDiv">
  <div id="innerDiv"></div>
</div>

부모 요소의 텍스트 가운데 정렬, 자식 요소의 인라인 블록 표시. 이것은 대부분의 모든 것을 중심에 둘 것입니다. 나는 그 호출이 "블록 플로트"라고 믿는다.

<div class="outer">
 <div class="inner"> some content </div>
</div><!-- end outer -->

<style>
div.outer{
 width: 100%;
 text-align: center;
}
div.inner{
 display: inline-block;
 text-align: left
}
</style>

이것은 또한 float, 행운을위한 좋은 대안입니다!

수직 및 수평으로 중앙 정렬하려면 :

#parentDiv{
    display:table;
    text-align:center;
}

#child {
     display:table-cell;
     vertical-align:middle;
}

CSS3을 사용 하여이 질문을 해결할 수있는 다른 브라우저 간 방법을 보여주고 싶습니다 calc().

이 calc()함수를 사용하여 margin-top자식 div가 부모 div를 기준으로 절대 위치에있을 때 자식 div 의 속성 을 제어 할 수 있습니다 .

주요 이점 calc()은 부모 요소 높이를 언제든지 변경할 수 있으며 자식 div는 항상 가운데에 정렬됩니다.

margin-top계산 (스크립트로 CSS가 아니라 그것은 매우 크다 동적으로 만들어 활용 ).

이 라이브 데모를 확인하십시오

<!DOCTYPE html>
<html>
  <head>
    <style>
      #parent{
        background-color:blue;
        width: 500px;
        height: 500px;
        position:relative;
      }
      #child{
        background-color:red;
        width: 284px;
        height: 250px;
        position:absolute;
        /* the middle of the parent(50%) minus half of the child (125px) will always             
           center vertically the child inside the parent */
        margin-top: -moz-calc(50% - 125px);
        /* WebKit */
        margin-top: -webkit-calc(50% - 125px);
        /* Opera */
        margin-top: -o-calc(50% - 125px);
        /* Standard */
        margin-top: calc(50% - 125px);
      }
    </style>
  </head>
  <body>
    <div id="parent">
      <div id="child">
      </div>
    </div>
  </body>
</html>

산출:

여기에 이미지 설명을 입력하십시오

나는 질문이 1 년 전에 만들어 졌다는 것을 알고 있습니다 ... 어쨌든 CSS3 덕분에 div에서 div를 수직으로 쉽게 정렬 할 수 있습니다 (예 : http://jsfiddle.net/mcSfe/98/ )

<div style="width: 100px; height: 100px">
<div>
Go to Hell!
</div>
</div>

div
{
display:-moz-box;
-moz-box-align:center;
}

참고 URL : https://stackoverflow.com/questions/6490252/vertically-centering-a-div-inside-another-div



반응형

'Programing' 카테고리의 다른 글

htmlentities () 대 htmlspecialchars ()  (0) 2020.02.11
Android Studio에서 전체 프로젝트에서 모든 문자열을 검색하십시오.  (0) 2020.02.11
R에서 같은 플롯으로 두 개의 그래프를 플로팅  (0) 2020.02.11
mysqldump로 특정 테이블 건너 뛰기  (0) 2020.02.11
Visual Studio에서 일치하는 중괄호로 이동 하시겠습니까?  (0) 2020.02.11

'Programing'의 다른글

  • 현재글다른 div 안에 div를 세로로 가운데에 맞추기

관련글

댓글

티스토리툴바