vertical-align: 중간이 스팬 또는 디비에서 작동하지 않는 이유는 무엇입니까?

vertical-align: 중간이 스팬 또는 디비에서 작동하지 않는 이유는 무엇입니까?

저는 수직으로 중심을 잡으려고 노력하고 있습니다.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/

CSS3 사용:

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

CSS:

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

요소를 수평으로 정렬하려면 "content-content: center;"를 사용합니다.

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

이것이 가장 좋은 방법인 것 같습니다. 제 원래 게시물 이후로 시간이 흘렀고 지금 해야 할 일은 다음과 같습니다.

.main {
  display: table;
  
  /* optional css start */
  height: 90px;
  width: 90px;
  /* optional css end */
}
        
.inner {
  border: 1px solid #000000;
  display: table-cell;
  vertical-align: middle;
}

<div class="main">
  <div class="inner"> This </div>
</div>

이것을 사용해 보십시오. 저에게 매우 적합합니다.

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

플렉스박스에 의지할 수 없는 경우....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안에쪽 하면가 일반 선 .이렇게 하면 내부 요소의 텍스트가 일반 줄 높이로 감싸집니다. Firefox및 8Chrome, 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.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>

이것은 현대적인 접근 방식이며 CSS Flexbox 기능을 활용합니다.이제 이러한 스타일을 추가하여 상위 컨테이너 내에서 컨텐츠를 수직으로 정렬할 수 있습니다..main

.main {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center; // To center align it horizontally as well
}

CSS Grid(2차원 그리드 기반 레이아웃 시스템)도 사용할 수 있습니다.

.main {
  display: grid;
  justify-content: center;
  align-content: center;
}

아래는 속기 접근 방식이지만 브라우저 지원은 여전히 낮습니다. - https://caniuse.com/ ?search=place-filename.

    .main {
      display: grid; // flex  -  works for both
      place-items: center;
    }

그리고 당신은 가도 좋습니다!

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에 수직 정렬을 사용하고 값을 중간으로 설정할 수 있습니다.이 아이 디브 안에 있는 모든 것은 수직으로 중심이 잡힐 것입니다.

여기에 수직 정렬을 수행하는 두 가지 방법의 예가 있습니다.저는 그것들을 사용하고 그것들은 꽤 잘 작동합니다.하나는 절대 위치 지정을 사용하고 다른 하나는 플렉스 박스를 사용하는 것입니다.

수직 정렬 예제

Flexbox를 사용하여 다른 요소 내부에 요소를 정렬할 수 있습니다.display: flex;사용.align-self또한 수평으로 정렬해야 하는 경우에는align-items그리고.justify-content컨테이너 안에

Flexbox를 사용하지 않으려면 위치 속성을 사용할 수 있습니다.컨테이너를 상대적으로 만들고 내용을 절대적으로 만들면 내용이 컨테이너 내부에서 자유롭게 이동할 수 있습니다.그래서 만약 당신이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;
}

간단합니다.그냥 추가display:table-cell당신의 본반에서.

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

이 jsfidle을 확인해 보세요!

여기 가장 간단한 해결책이 있습니다. 아무것도 변경할 필요가 없습니다. 중심을 잡고자 하는 div의 컨테이너에 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부모 컨테이너에서 플렉스 흐름이 시작되는 위치에 자식 div를 정렬합니다.이 경우, 그것은 정상을 유지할 것입니다.

• center아이 디브를 부모 컨테이너의 중앙에 정렬시킬 것입니다.이것은 정말 깔끔합니다. 모든 아이들을 감싸기 위해 추가적인 div를 추가할 필요가 없기 때문에 아이들의 중심을 잡기 위해 부모 컨테이너에 포장지를 넣을 수 있습니다.그 때문에, 이것은 진정한 수직 중심입니다.column flex-direction마찬가지로, 만약 당신이 그것을 바꾼다면.flow-direction로.row수평으로 중심이 잡힙니다.

• flex-end이것은 부모 컨테이너에서 플렉스 흐름이 끝나는 곳에 자식 div를 정렬합니다.이 경우 맨 아래로 이동합니다.

• space-between모든 아이들이 흐름의 시작부터 끝까지 퍼지게 될 것입니다.데모를 했다면, 저는 그들이 퍼져있다는 것을 보여주기 위해 다른 어린이 디브를 추가했습니다.

• space-around와비한과 한.space-between흐름의 시작과 끝에 절반의 공간이 있습니다.

때부터vertical-align에서 합니다.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 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 내에서 스팬 또는 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 이하로 설정

 /*Parent*/
 display: table;

/*immediate child*/
display: table-cell;
vertical-align: middle;

~라훌 닥시

다음이 정답입니다.

수직 정렬은 요소가 나타나는 선의 치수에 상대적으로 요소를 정렬합니다.

참조: https://christopheraue.net/design/why-vertical-align-is-not-working

질문은 "왜?"였습니다.

정답:vertical-align의 특정 합니다.

언급URL : https://stackoverflow.com/questions/16629561/why-is-vertical-align-middle-not-working-on-my-span-or-div