Изравняване на проблема за уеб дизайна html / css. включително цигулка. - html, css, css3, отзивчив дизайн

Опитвам се да проектирам отзивчиво оформление вкойто има изображение и параграф един до друг и изображението е вертикално изравнено с текста (височината на параграфа се променя с настройките на ширината на браузъра).

Ето моя код на френско грозде, http://jsfiddle.net/xSrpt/

Опитах да използвам

    vertical-align:middle;

и

    vertical-align:central;

на родителя div (#intro) и не са могли да стигнат никъде с него. Чувствам се, че това трябва да е лесна корекция и ми липсва нещо, но се надявам, че момчетата могат да ви помогнат.

моля, включете работна цигулка с отговора си.

Благодаря много!

Отговори:

1 за отговор № 1

Само за да добавите коментар към горепосочения отговор (много слаб отговор). Не е необходимо да преобразувате div в таблицата.

Всичко, което трябва да направите, е да приложите вертикално изравняване: от средата до детски елемент а не родителя.

#intro > * { vertical-align:middle }

Тук е вилката ви. http://jsfiddle.net/UBD6S/

много по-лесно решение.

---

1 за отговор № 2

опитайте да добавите към родителя си - display:table-cell;

редактиране:

трябва да направите div "act" като маса, както е показано по-долу:

CSS:
#intro{
display:table; /** table **/
width:90%;
background-color: #999;
padding:5%;
}
#pic{
height:100%;
width:80px;
background:black;
display:table-cell; /** table-cell **/
vertical-align:middle;
}
#your_pic {
width:80px;
height:80px;
background:#fff;
}
#p{
display:inline-block;
width:80%;
}

HTML:
<div id="intro">
<div id="pic"><div id="your_pic"></div></div>
<p id="p">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>
</div>

---