最好的方式对齐图片与文字在Wordpress？

Question

我是新的Wordpress，目前想要添加多个图片与文本对齐在一个页面。我曾想过用一个桌子来解决这个问题，但不确定这是否是最好的解决方案。我来描述一下我想怎么做的。

1.第1行.单元格图片

1.第2行.短图像描述的单元格标题文本+正文文本

我需要多次这样做，所以我认为这是最简单的方法.

现在我试着用TablePress插件来做这件事，唯一的问题是我不能为每个sell添加一个标题文本，还有一个不能显式地更改标题的字体。

是否有一种替代TablePress，允许我在单元格中更改文本的字体和颜色？

还是我应该手动做？真的很感谢你的帮助。

谢谢

Answer 1

这就是你要找的吗？

​

.container {
  width: 100%;
}

.image, .description {
  width: 50%;
  float: left;
  box-sizing: border-box;
}

.image img {
  width: 100%;
}

.description {
 padding: 15px;
}

<div class="container">
  <div class="image">
    <img src="https://preview.ibb.co/ioNAzT/img02.jpg">
  </div>
  <div class="description">
    <h2>Image title</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut mollis lacus. Pellentesque euismod mauris justo. Aenean eu sagittis ex. Suspendisse potenti. Duis velit lacus, vestibulum sit amet ex sed, mattis scelerisque metus.</p>
  </div>
</div>

​

Answer 2

我不会用桌子而是用挠曲箱来存储产品。关于一个例子，见下文。

​

.row {
  display: flex;
  justify-content: space-around; /* Horizontal alignment */
}

article {
  display: flex;
  flex-direction: column;
  align-items: center; /* Horizontal alignment */
}

<div class="row">
  <article>
    <div class="image"><img src="https://via.placeholder.com/100x100"></div>
    <h2>Header text</h2>
    <p>Detail text</p>
  </article>
  <article>
    <div class="image"><img src="https://via.placeholder.com/100x100"></div>
    <h2>Header text</h2>
    <p>Detail text</p>
  </article>
  <article>
    <div class="image"><img src="https://via.placeholder.com/100x100"></div>
    <h2>Header text</h2>
    <p>Detail text</p>
  </article>
</div>

​