CSS 세로 정렬이 float에서 작동하지 않음

CSS 세로 정렬이 float에서 작동하지 않음

---

어떻게 사용할 수 있습니다 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 속성은 인라인 블록 또는 인라인 테이블 셀 소자의 수직 정렬을 지정한다.

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

---

Vertical alignment doesn't work with floated elements, indeed. That's because float lifts the element from the normal flow of the document. You might want to use other vertical aligning techniques, like the ones based on transform, display: table, absolute positioning, line-height, js (last resort maybe) or even the plain old html table (maybe the first choice if the content is actually tabular). You'll find that there's a heated debate on this issue.

However, this is how you can vertically align YOUR 3 divs:

.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; 
}

Not sure why you needed both fixed width, display: inline-block and floating.

참고URL : https://stackoverflow.com/questions/11718134/css-vertical-align-does-not-work-with-float