pseudo class vertical-align

Question

, когда я удаляю выравнивание по вертикали в div.content: перед селектором текст будет сбрасываться и не может быть полностью отображен, так что же делает псевдокласс и почему это работает? PS: Есть ли другой способ реализовать как демонстрационные шоу, а именно выровнять текст в середине, и текст начнется в новой строке, если он слишком длинный.

здесь демо: http://jsfiddle.net/yougen/8WhNZ/

HTML:

<div class="wrapper"> 
     <div class="content"> 
      <span>Mix Color Lace Dress</span> 
     </div> 
</div> 

CSS:

div.wrapper { позиция: относительная; ширина: 120 пикселей; }

div.content { 
    width: 120px; 
    height: 80px; 
    text-align: center; 
    background: rgba(51,51,51,0.5); 
} 

div.content:before { 
    content: ''; 
    display: inline-block; 
    height: 100%; 
    vertical-align: middle; 
    margin-right: -0.25em; 
} 

div.content span { 
    display: inline-block; 
    width: 80px; 
    font-size: 14px; 
    font-weight: bold; 
    vertical-align: middle; 
    color: white; 
} 

Answer 1

, прежде чем псевдо элемент только в левой части вашего реального содержания. Его функция состоит в том, чтобы иметь 100% высоты контейнера и точно иметь выравнивание по вертикали: средний, чтобы заставить каждый элемент на той же линии (в данном случае, ваш диапазон) с тем же вертикальным выравниванием: средний, который будет показан в середине контейнера, хотя он не имеет 100% высоты.

Этот трюк используется, когда вы не знаете высоту элемента, который вы хотите выровнять посередине. В других случаях вы можете играть с вертикальными полями, например, но здесь нам нужен псевдоэлемент с известной высотой (100% от контейнера).

Посмотрите, что: http://jsfiddle.net/7hUqs/

#element-1 { 
    height: 50px; 
    background-color: blue; 
    vertical-align: middle; 
} 
#element-2 { 
    height: 100px; 
    background-color: yellow; 
    vertical-align: top; 
} 
#element-3 { 
    height: 70px; 
    background-color: green; 
    vertical-align: middle; 
} 
#element-4 { 
    height: 80px; 
    background-color: pink; 
    vertical-align: middle; 
} 

Вертикальных выравнивания: средние работы с silbing элементами, которые имеют те же пришли вертикальное выравнивание. Все они, как блок, будут выровнены с другими элементами линии и ее вертикальным выравниванием (в данном случае сверху). И высота линии - это максимальная высота ее элементов, а не высота контейнера. Немного странно, но это все.

Answer 2

попробовать этот

div.content:before { 
    content:''; 
    display: inline; 
    height: 100%; 
    margin-top:10px; 
    margin-right: -0.25em; 
} 
div.content span { 
    display: inline; 
    width: 80px; 
    font-size: 14px; 
    font-weight: bold; 
    vertical-align: middle; 
    color: white; 
} 

fiddle demo