将图像 div 与旁边的文本 div 垂直居中对齐

Question

我正在编辑一个 Mailchimp 模板，我试图将两个 div 彼此对齐，我成功地完成了。左边的 div 是文字，右边的 div 是 4 张图片。现在我想将这个图像网格与文本垂直对齐，但它应该动态变化。因此，如果文本变长，图像位置应该改变，并应始终保持在文本的垂直中心。

.mcnTextContent {
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
}

.mcnTextContent {
  position: relative;
  left: 0px;
  padding: 10px !important;
}

.mcnTextBlockOuter {
  padding: 0px !important;
}

.mcnTextBlockInner {
  padding: 0px !important;
  background-color: white;
}

.positionr {
  position: relative !important;
}

.textcolumn {
  width: 370px;
  float: left;
  height: auto !important;
}

.textcolumn h1 {
  text-transform: uppercase;
  color: black !important;
  font-family: "Arial" !important;
  font-weight: initial;
}

.textcolumn p {
  font-family: "Arial" !important;
  font-size: 14px !important;
  color: black !important;
}

.imagecolumn {
  float: right;
  padding-top: 125px;
}

.imagecolumn img {
  padding-left: 15px;
  padding-top: 10px;
}

<div class="positionr">
  <div class="textcolumn">
    <h1>Header</h1>
    <p>Body</p>
  </div>

  <div class="imagecolumn">
    <img />
    <img /><br />
    <img />
    <img />
  </div>
</div>

Answer 1

您需要删除浮动并改用包装器：https://jsfiddle.net/qhf8Lczg/1/

.mcnTextContent {
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
}

.mcnTextContent {
  position: relative;
  left: 0px;
  padding: 10px !important;
}

.mcnTextBlockOuter {
  padding: 0px !important;
}

.mcnTextBlockInner {
  padding: 0px !important;
  background-color: white;
}

.positionr {
  position: relative !important;
  display: flex;
  justify-content: space-between;
}

.textcolumn {
  display: inline-block;
  width: 370px;
  height: auto !important;
  border: 1px solid red;
}

.textcolumn h1 {
  text-transform: uppercase;
  color: black !important;
  font-family: "Arial" !important;
  font-weight: initial;
}

.textcolumn p {
  font-family: "Arial" !important;
  font-size: 14px !important;
  color: black !important;
}

.imagecolumn {
  display: inline-block;
  border: 1px solid blue;
}

.imagecolumn img {
  padding-left: 15px;
  padding-top: 10px;
}

.img-wrapper {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

<div class="positionr">
  <div class="textcolumn">
    <h1>Header</h1>
    <p>Lorem ipsum dolor sit amet, an doming bonorum pri, ferri oratio malorum pro et, per tritani phaedrum consulatu in. Vix ei persius assentior, omnes volumus pri id. Eos odio altera dictas no. Erat omnium nominati vix eu, sit et commune pertinacia. Id
      laudem officiis referrentur vix.</p>
  </div>
  <div class="imagecolumn">
    <div class="img-wrapper">
      <img src="http://via.placeholder.com/50x50" />
      <img src="http://via.placeholder.com/50x50" /><br />
      <img src="http://via.placeholder.com/50x50" />
      <img src="http://via.placeholder.com/50x50" />
    </div>
  </div>
</div>

Answer 2

这是一个解决方案建议：

.positionr {
  position: relative !important;
  background: orange;
}

.textcolumn {
  background: teal;
  height: auto !important;
}

.textcolumn h1 {
  text-transform: uppercase;
  color: black !important;
  font-family: "Arial" !important;
  font-weight: initial;
}

.flex-container {
  background: orange;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-container p {
  width: 370px;
  font-family: "Arial" !important;
  font-size: 14px !important;
  color: black !important;
}

.imagecolumn {
  background: blue;
}

.imagecolumn img {
  padding-left: 15px;
  padding-top: 10px;
  background: red;
}

<div class="positionr">
  <div class="textcolumn">
    <h1>Header</h1>
    <div class="flex-container">
      <p>Donec consequat nulla ut odio sagittis interdum. Maecenas porttitor faucibus congue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dictum nulla vitae leo mollis, ac sollicitudin erat tincidunt. Nam vel odio mauris. Aliquam vitae
        lectus condimentum, auctor orci a, varius elit. In metus purus, egestas tincidunt ligula at, dapibus imperdiet elit. Nam leo leo, sodales vel justo sed, egestas eleifend ante. Aliquam consectetur nisl odio, sit amet volutpat ante fringilla non.
        Sed in massa sem. Integer sit amet ultricies massa. Aenean eu ullamcorper libero. Aliquam malesuada, mauris a commodo dapibus, leo dui volutpat enim, a elementum nulla dolor eu lacus. Sed venenatis leo nec rutrum tempor. Integer quis rutrum purus,
        rhoncus fringilla odio.</p>

      <div class="imagecolumn">
        <img />
        <img /><br />
        <img />
        <img />
      </div>
    </div>
  </div>

怎么做？

创建一个 flexbox 容器：

<div class="flex-container">
</div>

.flex-container {
  display: flex;
}

设置align-items: center（图像和文本容器垂直居中）。
删除
```
float: right;
padding-top: 125px;
```

注意：背景颜色只是为了方便查看框，您可以随意删除它。

参考文献：

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 3

您只需在父项

上添加 flex

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

将图像 div 与旁边的文本 div 垂直居中对齐

Align an image div in the vertical center of a text div next to it

html

css

mailchimp

怎么做？