[html] 왜 세로 정렬 : 중간이 스팬 또는 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>

스 니펫 확장