将 P 标签垂直对齐到图像旁边

我有一个p标签，我想在图像旁边垂直对齐。我遇到的问题是只有第一行文本是垂直对齐的。怎么做我让 p 标签中的文本换行到图像旁边并保持垂直对齐？

.HTML

<body>
  <div class="blog">
    <div class="post">
      <img src="https://dummyimage.com/600x400/a3b5c4/000000.jpg&text=example+of+donation+feed">
      <p>“Once someone dreams a dream, it can't just drop out of existence. But if the dreamer can't remember it, what becomes of it? It lives on in Fantastica, deep under earth. There are forgotten dreams stored in many layers. The deeper one digs, the closer they are. All Fantastica rests on a foundation of forgotten dreams.”</p>
    </div>
  </div>
</body>

.CSS

<style>
.blog img {
  vertical-align: middle;
}
.blog p {
  display: inline;
}
</style>

display: flex;父级，align-items: center使内容垂直居中。

.post {
  display: flex;
  align-items: center;
}

<div class="blog">
    <div class="post">
      <img src="https://dummyimage.com/600x400/a3b5c4/000000.jpg&text=example+of+donation+feed">
      <p>“Once someone dreams a dream, it can't just drop out of existence. But if the dreamer can't remember it, what becomes of it? It lives on in Fantastica, deep under earth. There are forgotten dreams stored in many layers. The deeper one digs, the closer they are. All Fantastica rests on a foundation of forgotten dreams.”</p>
    </div>
  </div>

您也可以使用网格系统，尽管它可能会绕道而行。

.parent {
display: grid;
grid-template-columns: repeat(2, 1fr);
} 
img { grid-area: 1 / 1 / 2 / 2; }
p { grid-area: 1 / 2 / 2 / 3; }

就我而言，它会自动垂直对齐。

有关 mor 信息。您可以访问 CSS Tricks。

CSS 代码应该是：

.blog img {
    vertical-align: middle;
    float:left;
    width:50px;
    height:50px;
    margin-right: 15px;
}
.blog p {
    display: inline;
}

如果我理解要求，您希望整个段落与您的图像相邻吗？

最简单的解决方案是使用 CSS table属性。请注意，这并不意味着使用表。相反，它只是显示这样的元素。

下面是一些示例 CSS

div.blog {
    display: table;
}
div.blog>img {
    display: table-cell;
}
div.blog>p {
    display: table-cell;
}

第一个属性中的display:table不是严格意义上的，但默认值为 display:table-row ，这使您对大小的控制较少。

相关内容

最新更新

热门标签：