[html] CSS는 플로팅 div를 세로로 정렬

Program / 글쓴이

나란히 서있는 2 개의 div가 포함 된 div (#wrapper)가 있습니다.

right-div를 세로로 정렬하고 싶습니다. 내 주 래퍼에서 vertical-align : middle을 시도했지만 작동하지 않습니다. 그것은 나를 미치게 만든다!

누군가가 도울 수 있기를 바랍니다.

http://cssdesk.com/LWFhW

HTML :

<div id="wrapper">
  <div id="left-div">
    <ul>
      <li>One</li>
      <li>Two</li>
    </ul>
  </div>
  <div id="right-div">
    Here some text...
  </div>
</div>

CSS :

#wrapper{
  width:400px;
  float:left;
  height:auto;
  border:1px solid purple;}

#left-div{
  width:40px;
  border:1px solid blue;
  float:left;}

#right-div{
  width:350px;
  border:1px solid red;
  float:left;}

ul{
  list-style-type: none;
  padding:0;
  margin:0;}

답변

부동 요소에는 운이 없습니다. 수직 정렬을 따르지 않고

display:inline-block대신 다음 이 필요 합니다.

http://cssdesk.com/2VMg8

조심

display: inline-block;요소 사이의 공백을 실제 공백으로 해석하므로 주의하십시오 . 그렇게 무시하지 않습니다 display: block.

나는 이것을 추천한다 :

설정 font-size에 포함 된 요소의 0(영)과를 재설정 font-size요소가 너무 좋아에 필요한 값으로

ul {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0;
}
ul > li {
    font-size: 12px;
}

여기에서 데모를 참조하십시오. http://codepen.io/HerrSerker/pen/mslay

CSS

#wrapper{
  width:400px;
  height:auto;
  border:1px solid green;
  vertical-align: middle;
  font-size: 0;
}

#left-div{
  width:40px;
  border:1px solid blue;
  display: inline-block;
  font-size: initial;
  /* IE 7 hack */
  *zoom:1;
  *display: inline;
  vertical-align: middle;
}

#right-div{
  width:336px;
  border:1px solid red;
  display: inline-block;
  font-size: initial;
  /* IE 7 hack */
  *zoom:1;
  *display: inline;
  vertical-align: middle;
}

답변

디스플레이 테이블과 디스플레이 테이블 셀을 사용하면이 작업을 매우 쉽게 수행 할 수 있습니다.

#wrapper {
    width: 400px;
    float: left;
    height: auto;
    display: table;
    border: 1px solid green;
}

#right-div {
    width: 356px;
    border: 1px solid red;
    display: table-cell;
    vertical-align: middle;
}

편집 : 실제로 CSS 데스크에서 빠르게 엉망이되었습니다-http : //cssdesk.com/RXghg

다른 편집 : Flexbox를 사용하십시오. 이것은 작동하지만 꽤 구식입니다-http: //www.cssdesk.com/davf5

#wrapper {
    display: flex;
    align-items: center;
    border:1px solid green;
}

#left-div {
    border:1px solid blue;
}

#right-div {
    border:1px solid red;
}

답변

나는 이것이 고대의 질문이라는 것을 알고 있지만 플로트 수직 정렬 문제에 대한 해결책을 게시하는 것이 유용하다고 생각했습니다.

플로팅하려는 콘텐츠 주위에 래퍼를 만들면 :: after 또는 :: before 의사 선택기를 사용하여 래퍼 내에서 콘텐츠를 수직으로 정렬 할 수 있습니다. 정렬에 영향을주지 않고 원하는 콘텐츠의 크기를 조정할 수 있습니다. 유일한 캐치는 래퍼의 100 % 높이를 작성해야한다는 것입니다 자사의 컨테이너를.

http://jsfiddle.net/jmdrury/J53SJ/

HTML

<div class="container">
    <span class="floater">
        <span class="centered">floated</span>
    </span>
    <h1>some text</h1>
</div>

CSS

div {
    border:1px solid red;
    height:100px;
    width:100%;
    vertical-align:middle;
    display:inline-block;
    box-sizing: border-box;
}
.floater {
    float:right;
    display:inline-block;
    height:100%;
    box-sizing: border-box;
}
.centered {
    border:1px solid blue;
    height: 30px;
    vertical-align:middle;
    display:inline-block;
    box-sizing: border-box;
}
h1 {
    margin:0;
    vertical-align:middle;
    display:inline-block;
    box-sizing: border-box;
}
.container:after, .floater:after, .centered:after, h1:after {
    height:100%;
    content:'';
    font-size:0;
    vertical-align:middle;
    display:inline-block;
    box-sizing: border-box;
}

답변

가능한 해결책은 https://spin.atomicobject.com/2016/06/18/vertically-center-floated-elements-flexbox/에 지정된대로 div flex항목이 정렬 된 래퍼를 만드는 것 입니다.center

답변

수레를 사용하지 않기 위해 최선을 다하지만 필요한 경우 다음 줄을 사용하여 가운데에 수직으로 정렬합니다.

position: relative;
top: 50%;
transform: translateY(-50%);

답변

내 수정 사항의 유일한 단점은 div 높이가 설정되어 있다는 것입니다 … 그게 문제인지 아닌지 모르겠습니다.

http://cssdesk.com/kyPhC

답변