[html] CSS 세로 정렬이 float에서 작동하지 않습니다.

Program / 글쓴이

어떻게 사용할 수 있습니다 vertical-align뿐만 아니라 float의 div속성? 은 vertical-align내가 사용하지 않는 경우 벌금을 작동합니다 float. 하지만 플로트를 사용하면 작동하지 않습니다. float:right마지막 div에를 사용하는 것이 중요합니다 .

모든 div에서 float를 제거하면 다음을 시도하고 있습니다.

<div class="wrap">
    <div class="left">First div, float left,  has more text.</div>
    <div class="left2">Second div, float left </div>
    <div class="right">Third div, float right</div>
</div>

CSS :

.wrap{
    width: 500px;
    overflow:hidden;
    background: pink;
}

.left {
    width: 150px;
    margin-right: 10px;
    background: yellow;
    float:left;
    vertical-align: middle;
    display:inline-block

}

.left2 {
    width: 150px;
    margin-right: 10px;
    background: aqua;
    float:left;
    vertical-align: middle;
    display:inline-block
}

.right{
    width: 150px;
    background: orange;
    float:right;
    vertical-align: middle;
    display:inline-block
}

JSFiddle

답변

줄 높이를 설정해야합니다.

<div style="border: 1px solid red;">
<span style="font-size: 38px; vertical-align:middle; float:left; line-height: 38px">Hejsan</span>
<span style="font-size: 13px; vertical-align:middle; float:right; line-height: 38px">svejsan</span>
<div style="clear: both;"></div>

http://jsfiddle.net/VBR5J/

답변

편집 :

수직 정렬 CSS 속성은 인라인 블록 또는 인라인 테이블 셀 소자의 수직 정렬을 지정한다.

수직 정렬 이해를 위해이 문서 읽기

답변

수직 정렬은 실제로 플로팅 요소에서 작동하지 않습니다. float는 문서의 정상적인 흐름에서 요소를 들어 올리기 때문입니다. 변형, 디스플레이 : 테이블, 절대 위치, 라인 높이, js (마지막 수단) 또는 일반 오래된 HTML 테이블 (콘텐츠가 실제로 표 형식). 이 문제에 대한 열띤 논쟁이 있음을 알게 될 것입니다.

그러나 다음은 3 개 div를 수직으로 정렬하는 방법입니다. 

.wrap{
    width: 500px;
    overflow:hidden;
    background: pink;
}

.left {
    width: 150px;
    margin-right: 10px;
    background: yellow;
    display:inline-block;
    vertical-align: middle;
}

.left2 {
    width: 150px;
    margin-right: 10px;
    background: aqua;
    display:inline-block;
    vertical-align: middle;
}

.right{
    width: 150px;
    background: orange;
    display:inline-block;
    vertical-align: middle;
}

고정 너비, 디스플레이 : 인라인 블록 및 플로팅이 필요한 이유를 잘 모르겠습니다.

답변