¿Por qué la alineación vertical no funciona correctamente cuando se usa float en CSS?

Question 1

¿Cómo puedo usar el vertical-align tanto como float en el div ¿propiedades? los vertical-align funciona bien si no uso el float. Pero si uso el flotador, entonces no funciona. Es importante para mí usar el float:right para la última div.

Estoy tratando de seguir, si elimina el flotador de todos los div, entonces funcionaría bien:

<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

Question 2

Necesita establecer la altura de la línea.

<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/

Question 3

Editado:

los alineación vertical La propiedad CSS especifica la alineación vertical de un elemento en línea, bloque en línea o celda de tabla.

Lea este artículo para Comprender la alineación vertical

Question 4

De hecho, la alineación vertical no funciona con elementos flotantes. Eso es porque float levanta el elemento del flujo normal del documento. Es posible que desee utilizar otras técnicas de alineación vertical, como las que se basan en transformación, visualización: tabla, posicionamiento absoluto, altura de línea, js (quizás como último recurso) o incluso la tabla html simple (quizás la primera opción si el contenido es en realidad tabular). Descubrirá que hay un acalorado debate sobre este tema.

Sin embargo, así es como puedes alinear verticalmente TUS 3 divisiones:

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

No estoy seguro de por qué necesitaba ancho fijo, pantalla: bloque en línea y flotante.

¿Ha sido útil esta solución?