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

马克斯·莫图

我正在编辑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>

Sirence

您将需要删除浮点数并改用包装器：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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。