web设计html/css的对齐问题。包括小提琴。

我正在尝试设计一个响应性布局，其中有一个图像和一个并排的段落，并且图像与文本垂直对齐（段落高度随着浏览器宽度的调整而变化）

这是我的葡萄干代码，

我试过使用

    vertical-align:middle;

及

在父div（#intro）上，但无法使用它。 我觉得这应该是一个简单的解决办法，我错过了一些东西，但希望你们能帮助我

请在你的答案中加入一把工作小提琴

---

非常感谢

尝试添加到其父级-

显示：表格单元格

编辑：

您需要使div“动作”类似于表，如下所示：

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>

CSS:
#介绍{
显示：表格；/**表格**/
宽度：90%；
背景色：#999；
填充：5%；
}
#图片{
身高：100%；
宽度：80px；
背景：黑色；
显示：表格单元格；/**表格单元格**/
垂直对齐：中间对齐；
}
#你的照片{
宽度：80px；
高度：80px；
背景：#fff；
}
#p{
显示：内联块；
宽度：80%；
}
HTML:
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
仅对上述答案添加一条评论（代表过低）。
不需要将div转换为表

您所要做的就是将垂直对齐：中对齐应用到子元素，而不是父元素

#intro > * { vertical-align:middle }

这是你的叉子。

更简单的解决方案。
@dtjokro。。。这是一个很好的答案。。谢谢你，朋友
#intro > * { vertical-align:middle }