html - 如何对齐照片和文字并正确显示？

我目前无法正确放置我的图片和p标签，并将它们并排对齐，这是我的html / php代码：

<?php
//If the user is logged in
$getposts = mysqli_query($conn,"SELECT * FROM posts WHERE user_posted_to='$user' ORDER BY id DESC LIMIT 10") or die(mysql_error());
while ($row = mysqli_fetch_array($getposts,MYSQLI_ASSOC)) {
                        $id = $row['id'];
                        $body = $row['body'];
                        $date_added = $row['date_added'];
                        $added_by = $row['added_by'];
                        $user_posted_to = $row['user_posted_to'];
     echo "
     <article class='post'>
     <div class='post-content'>
<div class='content'>
<img src='https://d324imu86q1bqn.cloudfront.net/uploads/user/avatar/46407/ello-large-a74c9662.png' id='post_photo' alt=''></img>
<p>$body</p>
</div>
</div></article>
     ";
     }
?>

我正在使用此CSS代码：

.post-content {
    display: block;
    word-wrap: break-word;
}
#read {
    font-size:0.85rem;
    line-height:1.5;
}
#post_photo{
    border-radius: 256px;
    width: 130px; height: 130px;
    float: left;
    overflow:hidden;
}

但是，图像无法与p标签对齐，无法在p标签的左侧和右侧正确显示，并且之间留有间隙。

最佳答案

使图像和文本分别为display: table-cell和vertical-align: middle。对内容执行display: table，然后从图像样式中删除float: left;。

另外，您没有正确关闭img标记。

工作代码段：

.post-content {
  display: block;
  word-wrap: break-word;
}

#read {
  font-size:0.85rem;
  line-height:1.5;
}

#post_photo{
  border-radius: 256px;
  width: 130px; height: 130px;
  /*float: left;*/
  overflow:hidden;
}

/***** NEW STYLES BELOW *****/

.content{
  display: table;
}

#post_photo, .content > p{
  display: table-cell;
  vertical-align: middle;
}

.content > p{
  padding-left: 20px;
}

<article class='post'>
  <div class='post-content'>
    <div class='content'>
      <img src='https://d324imu86q1bqn.cloudfront.net/uploads/user/avatar/46407/ello-large-a74c9662.png' id='post_photo' alt='' /> <!-- img tags are self closing tags -->
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris hendrerit mauris ac pellentesque ultricies. Quisque gravida bibendum justo non sodales. In tortor sapien, elementum quis tincidunt ac, pellentesque nec nunc. Fusce lacinia mollis mauris, sit amet mattis nibh ultrices id. Curabitur eleifend metus massa, vitae accumsan tellus commodo ut. Proin odio nunc, volutpat nec bibendum quis, scelerisque a diam. Curabitur lacinia vestibulum blandit.</p>
  </div>
</article>