wyrównanie pionowe: środek nie działa

Question

Właściwość css vertical-align: middle nie działa w tym przykładzie.

HTML:

<div> 
    <span class='twoline'>Two line text</span> 
    <span class='float'> Float right </span> 
</div> 

CSS:

.float { 
    float: right; 
} 

.twoline { 
    width: 50px; 
    display: inline-block; 
} 

div { 
    border: solid 1px blue; 
    vertical-align: middle; 
} 

span który pływa po prawej stronie nie jest wyśrodkowany w pionie w stosunku do jego zawierający div. Jak mogę to ustawić pionowo? Ten kod jest w

Answer 1

Musisz zawinąć swój element w table-cell, w ramach table przy użyciu display.

Jak to:

<div> 
    <span class='twoline'>Two line text</span> 
    <span class='float'>Float right</span> 
</div> 

i

.float { 
    display: table-cell; 
    vertical-align: middle; 
    text-align: right; 
} 
.twoline { 
    width: 50px; 
    display: table-cell; 
} 
div { 
    display: table; 
    border: solid 1px blue; 
    width: 500px; 
    height: 100px; 
} 

Pokazany tutaj: http://jsfiddle.net/e8ESb/7/

Answer 2

Wyrównanie pionowe nie działa tak, jak tego chcesz. Zobacz: http://phrogz.net/css/vertical-align/index.html

To nie jest ładne, ale zrobi to, co chcesz: Wyrównanie pionowe zachowuje się zgodnie z oczekiwaniami tylko wtedy, gdy jest używane w komórce tabeli.

http://jsfiddle.net/e8ESb/6/

Istnieją inne możliwości: Można zadeklarować rzeczy jak tabelach lub komórkach tabeli wewnątrz CSS, aby je zachowywać się zgodnie z oczekiwaniami, na przykład. Marginesy i pozycjonowanie mogą czasami być odtwarzane, aby uzyskać ten sam efekt. Żadne z tych rozwiązań nie są jednak straszne.

Answer 3

Odpowiedź udzielona przez Matt K działa perfekcyjnie.

Jednak ważne jest, aby zwrócić uwagę na jedną rzecz - Jeśli element, na który aplikujesz, ma pozycję bezwzględną, nie zadziała. Go do pracy, to zrobić -

<div style="position:absolute; hei..."> 
    <div style="position:relative; display: table-cell; vertical-align:middle; hei..."> 
     <!-- here position MUST be relative, this div acts as a wrapper--> 
     ... 
    </div> 
</div> 

Answer 4

Należy ustawić stałą wartość do rozpiętości za line-height nieruchomości:

.float, .twoline { 
    line-height: 100px; 
}