왜 세로 정렬 : 중간이 스팬 또는 div에서 작동하지 않습니까?

다른 요소 내 에서 span또는 div요소 를 세로로 가운데에 맞추려고합니다 div. 그러나 내가 넣을 때 vertical-align: middle아무 일도 일어나지 않습니다. display두 요소 의 속성을 변경하려고 시도했지만 아무것도 작동하지 않는 것 같습니다.

이것은 내가 현재 내 웹 페이지에서하고있는 일입니다.

.main {
  height: 72px;
  vertical-align: middle;
  border: 1px solid black;
  padding: 2px;
}
    
.inner {
  vertical-align: middle;
  border: 1px solid red;    
}
    
.second {
  border: 1px solid blue; 
}

<div class="main">
  <div class="inner">
    This box should be centered in the larger box
    <div class="second">Another box in here</div>
  </div>
</div>

작동하지 않는 것을 보여주는 구현의 jsfiddle은 다음과 같습니다. http://jsfiddle.net/gZXWC/

이것은 가장 좋은 방법 인 것 같습니다-원래 게시물 이후로 시간이 지났으며 지금해야 할 일입니다 .http : //jsfiddle.net/m3ykdyds/200

/* CSS file */

.main {
    display: table;
}

.inner {
    border: 1px solid #000000;
    display: table-cell;
    vertical-align: middle;
}

/* HTML File */
<div class="main">
    <div class="inner"> This </div>
</div>

CSS3 사용하기 :

<div class="outer">
   <div class="inner"/>
</div>

CSS :

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

참고 : 이전 IE에서는 작동하지 않을 수 있습니다

이것을 시도하고 나를 위해 잘 작동합니다 :

/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;

/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;

/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;

/* W3C */
display:box;
box-pack:center;
box-align:center;

div를 포함하는 것과 같은 높이로 선 높이를 설정하면 작동합니다.

데모 http://jsfiddle.net/kevinPHPkevin/gZXWC/7/

.inner {
    line-height:72px;
    border: 1px solid #000000;
}

혹시 인 flexbox ... 장소에 의존 할 수 없습니다 .child로 .parent의 중심. 픽셀 크기를 알 수 없을 때 (즉, 항상) IE9 +에 문제가 없을 때 작동

.parent { position: relative; }

.child {
    position: absolute;
    top : 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform    : translate(-50%, -50%);    
}

<div class="parent" style="background:lightyellow; padding:6em"> 
  <div class="child" style="background:gold; padding:1em">&mdash;</div> 
</div>

vertical-align: middle내부 요소를 입어야 합니다외부 요소가 아닌 . line-height외부 요소 의 속성을 외부 요소 의 속성과 일치하도록 설정하십시오 height. 다음 설정 display: inline-block및 line-height: normal내측 요소. 이렇게하면 내부 요소의 텍스트가 일반 선 높이로 줄 바꿈됩니다. Chrome, Firefox, Safari 및 IE 8 이상에서 작동

.main {
    height: 72px;
    line-height:72px;
    border: 1px solid black;
}
.inner {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}

<div class="main">
    <div class="inner">Vertically centered text</div>
</div>

깡깡이

나는 누군가를 돕는 경우를 대비하여 래퍼 div의 중앙에있는 모든 것을 정렬하기 위해 이것을 사용했습니다.

div.wrapper {
  /* --- This works --- */
  display: flex;
  /* Align Vertically */
  align-items: center;
  /* Align Horizontally */
  justify-content: center;
  /* --- ---------- ----- */
  width: 100%;
  height:100px;
  background-color: blue;
}
div.inner {
  width: 50px;
  height: 50px;
  background-color: orange;
}

<div class="wrapper">
  <div class="inner">
  </div>
</div>

다음은 수직 정렬을 수행하는 두 가지 방법의 예입니다. 나는 그것들을 사용하고 그들은 꽤 잘 작동합니다. 하나는 절대 위치를 사용하고 다른 하나는 flexbox를 사용 합니다 .

수직 정렬 예

인 flexbox를 사용하면 함께 다른 요소 내부에 자체적으로 요소를 정렬 할 수 있습니다 display: flex;사용 align-self. 당신은 수평으로 또한 정렬해야하는 경우 사용할 수 있습니다 align-items및justify-content 컨테이너에서 .

flexbox를 사용하지 않으려면 position 속성을 사용할 수 있습니다. 컨테이너를 상대 및 컨텐츠를 절대적으로 만들면 컨텐츠가 컨테이너 내부에서 자유롭게 이동할 수 있습니다. 그래서 당신이 사용하는 경우 top: 0;와 left: 0;내용에서, 그것은 컨테이너의 왼쪽 상단 모서리에 배치됩니다.

그런 다음 정렬하려면 상단 및 왼쪽 참조를 50 %로 변경하면됩니다. 그러면 컨텐츠의 왼쪽 상단 모서리에서 컨테이너 중심에 컨텐츠가 배치됩니다.

따라서 내용의 절반 크기를 왼쪽과 위쪽으로 변환하여이를 수정해야합니다.

여기에 정렬 방법에 대한 훌륭한 기사가 있습니다. 저는 플로트 방식을 좋아합니다.

http://www.vanseodesign.com/css/vertical-centering/

HTML :

<div id="main">
    <div id="floater"></div>
    <div id="inner">Content here</div>
</div>

그리고 해당 스타일 :

#main {
   height: 250px;
}

#floater {
   float: left;
   height: 50%;
   width: 100%;
   margin-bottom: -50px;
}

#inner {
   clear: both;
   height: 100px;
}

HTML

<div id="myparent">
  <div id="mychild">Test Content here</div>
</div>

CSS

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

부모 div를 테이블로 표시하고 자식 div를 테이블 셀로 표시하도록 설정했습니다. 그런 다음 자식 div에서 세로 정렬을 사용하고 그 값을 중간으로 설정할 수 있습니다. 이 자식 div 내부의 모든 것은 세로 중심이됩니다.

간단 해. display:table-cell메인 클래스에 추가 하십시오.

.main {
  height: 72px;
  vertical-align: middle;
  display:table-cell;
  border: 1px solid #000000;
}

이 jsfiddle을 확인하십시오 !

여기에 가장 간단한 해결책이 있습니다-아무것도 변경할 필요가 없으며, 중앙에 배치하려는 div 컨테이너에 3 줄의 CSS 규칙을 추가하십시오. 나는 Flex Box#LoveFlexBox를 사랑

.main {
  /* I changed height to 200px to make it easy to see the alignment. */
  height: 200px;
  vertical-align: middle;
  border: 1px solid #000000;
  padding: 2px;
  
  /* Just add the following three rules to the container of which you want to center at. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* This is true vertical center, no math needed. */
}
.inner {
  border: 1px solid #000000;
}
.second {
  border: 1px solid #000000;
}

<div class="main">
  <div class="inner">This box should be centered in the larger box
    <div class="second">Another box in here</div>
  </div>
  <div class="inner">This box should be centered in the larger box
    <div class="second">Another box in here</div>
  </div>
</div>

보너스

justify-content값은 다음과 같은 몇 가지 옵션을 설정할 수 있습니다 :

• flex-start하위 컨테이너를 상위 컨테이너에서 플렉스 흐름이 시작되는 위치에 정렬합니다. 이 경우 상단에 유지됩니다.

• center하위 div를 부모 컨테이너의 중심에 정렬합니다. 모든 자식을 감싸기 위해 추가 div를 추가 할 필요가 없기 때문에 래퍼를 부모 컨테이너에 넣어 자식을 중앙에 배치 할 필요가 없기 때문에 이것은 정말 깔끔합니다. 그 때문에 이것은 진정한 의 수직 중심 ( column flex-direction. 유사하게, 당신은을 변경하는 경우 flow-direction에 row, 그것은 수평으로 중심이 될 것입니다.

• flex-end하위 컨테이너를 플렉스 흐름이 상위 컨테이너에서 끝나는 위치에 정렬합니다. 이 경우 아래쪽으로 이동합니다.

• space-between흐름의 시작부터 흐름의 끝까지 모든 어린이를 분산시킵니다. 데모 인 경우 다른 자식 div를 추가하여 확산되었음을 보여줍니다.

• space-around와 비슷 space-between하지만 흐름의 시작과 끝에 공백의 절반 이 있습니다.

이후 vertical-alignA의 예상대로 작동 td, 당신은 단세포를 넣을 수 table에 div그 내용을 정렬 할 수 있습니다.

<div>
    <table style="width: 100%; height: 100%;"><tr><td style="vertical-align: middle; text-align: center">
        Aligned content here...
    </td></tr></table>
</div>

어리석은 일이지만 내가 알 수있는 한 작동합니다. 다른 해결 방법의 단점이 없을 수 있습니다.

내용을 높이가 100 % 인 표 안에 넣고 기본 div의 높이를 설정하십시오.

<div style="height:80px;border: 1px solid #000000;">
<table style="height:100%">
<tr><td style="vertical-align: middle;">
  This paragraph should be centered in the larger box
</td></tr>
</table>
</div>

다른 div 내에서 span 또는 div 요소를 세로로 가운데에 맞추려면 부모 div에 상대적인 위치를 추가하고 자식 div에 절대 위치를 지정하십시오. 이제 자식 div는 div 내부의 어느 위치 에나 배치 할 수 있습니다. 아래 예는 가로 및 세로 중앙에 있습니다.

<div class="parent">
    <div class="child">Vertically and horizontally centered child div</div>
</div>

CSS :

.parent{
    position: relative;
}
.child{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

이것은 현대적인 접근 방식이며 CSS Flexbox 기능을 사용합니다. 이제 수직 바로 이러한 스타일을 추가하여 부모 컨테이너 내의 내용을 정렬 할 수 있습니다 .main컨테이너

.main {
        display: flex;
        flex-direction: column;
        justify-content: center;
}

그리고 당신은 갈 수 있습니다!