Выровняйте изображение 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

Вот предложение по решению:

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

Как это сделать?

1. Создание контейнера flexbox:

   <div class="flex-container">
   </div>
   
   .flex-container {
     display: flex;
   }
   

2. Set align-items: center (по вертикали по центру и изображение, и текстовый контейнер).

3. Удалить

   float: right;
   padding-top: 125px;
   

Примечание: фоновые цвета здесь только для того, чтобы увидеть ящики, вы можете удалить их.

---

Ссылки:

• https://css -tricks.com / сниппеты / CSS / а-руководство к Flexbox /

Answer 2

Вы можете просто добавить flex к родителю

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

Answer 3

Вам нужно будет удалить поплавок и использовать вместо него обертку: 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>