Question

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 1

以下是解决方案的提案：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

怎么做？

创建一个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 2

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

＆＃13;

.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%);
}

＆＃13;

<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>

＆＃13;

Answer 3

您只需在父

上添加

$app->add('CorsMiddleware');

即可

flex

将图像div对齐它旁边的文本div的垂直中心

3 个答案:

怎么做？