html - 如何将包含文本和图像的div对齐到中心

我要执行以下操作：

一个div，其中包含图片50x50和旁边的字体为25px的文本。
图片和文字应居中对齐。
包含图片和文字的div应对齐其父对象的中心。

我尝试了followint，但没有得到期望的结果。

需要做什么？

http://www.w3schools.com/css/tryit.asp?filename=trycss_layout_float

<html>
<head>
<style>
img {
    float: center;
}
</style>
</head>
<body>

<p align="center"><img src="w3css.gif" alt="W3Schools.com" width="50" height="50">
Lorem .</p>

</body>
</html>

最佳答案

尝试这个：

<p align="center"><img src="http://www.ifn-modern.com/skin/frontend/fortis/default/images/phone.png" alt="" width="50" height="50">
Lorem .</p>

p img{
  display:inline-block;
  vertical-align:middle;
  margin-right:5px;
}

这是jsfiddle链接：https://jsfiddle.net/x376p83x/