同一行中的 HTML 2 列，标题和段落与图像垂直居中

Question

我有一个问题，我无法垂直对齐我的所有文本，我尝试搜索但没有找到解决我问题的方法。

此链接显示了我的代码在运行时的样子，我试图让页眉更接近段落。 Visual of how code looks for me

我正在创建 (2) col-sm-6在同一<div class="row"> .右栏我希望图片在栏内垂直居中，而在左栏我希望段落和标题垂直居中。 CSS 的原因，我试图让它在任何浏览器窗口大小下都能正确缩放。

我走在正确的轨道上吗？

这是我的CSS

.center { 
  height: 400px;
  position: relative;
  border: 0px solid green; 
}

.center p {
  margin: 5;
  position: relative;
  top: 50%;
  left: 50%;
  -ms- transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

<p style="text-align: justify; font-family: verdana;"><span style="font-size: large;"><strong>Lorem Ipsum</strong>&trade;</span></p>

<div class="row">

<div class="col-sm-6" style="padding-top: 00px;">

<div class="center">
   
<p>Lorem ipsum dolor sit amet, nonumes voluptatum mel ea, cu case ceteros cum. Novum commodo malorum vix ut. Dolores consequuntur in ius, sale electram dissentiunt quo te. Cu duo omnes invidunt, eos eu mucius fabellas. Stet facilis ius te, quando voluptatibus eos in. Ad vix mundi alterum, integre urbanitas intellegam vix in. Eum facete intellegat ei, ut mazim melius usu. Has elit simul primis ne, regione minimum id cum. Sea deleniti dissentiet ea. Illud mollis moderatius ut per, at qui ubique populo. Eum ad cibo legimus, vim ei quidam fastidii.</p>
   
</div>
 </div>
  
<div class="col-sm-6" style="padding-top: 000px;">
  
<div class="center">
   
<p><img src="https://picsum.photos/id/237/3500/2095" width="450" height="300" /></p>
</div>
</div>
</div>

Answer 1

代码中应避免的几件事:

1) 内联 CSS2) 如果值为 0，则可以删除单位。此外，padding: 000px; 是错误的。应该是padding: 0;

这是我使用 flex 完成的工作代码。那你不需要职位。让我知道这是否是您要找的:

https://codepen.io/NehhaSharma/pen/abbVNvb