Html 我该怎么做用于居中图像左侧和右侧文本的更好代码

我怎样才能创造这个呢？（下图）

我想设计的是：

这是我的代码，但我知道它可能更干净，只是不知道如何

一些文本
更多的文字
更多文本
一些文本
更多的文字
更多文本
.形象{
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.左{
位置：绝对位置；
文本对齐：左对齐；
左边距：307px；
}
.对{
位置：绝对位置；
左边距：825px；
边缘顶部：-172px；
文本对齐：右对齐；
}

不要使用绝对定位。使用网格，可以执行以下操作： 对于html，首先将其包装在容器div中

<div class="grid-container">
    <div class="left">
<h3>Some text</h3>
<h3>Some more text</h3>
<h3>Even more text</h3>
</div>
<div class="image">
  <img src="https://filedn.com/ltOdFv1aqz1YIFhf4gTY8D7/ingus-info/BLOGS/Photography-stocks3/stock-photography-slider.jpg"/>
</div>
<div class="right">
<h3>Some text</h3>
<h3>Some more text</h3>
<h3>Even more text</h3>
</div>
</div>

---

这里的绝对位置似乎不正确。 您可以尝试将HTML包装在父容器中，并使用flexbox，类似这样

<div class="parent-container">
  <div class="left">
    <h3>Some text</h3>
    <h3>Some more text</h3>
    <h3>Even more text</h3>
  </div>
  <div class="image">
    <img src="https://filedn.com/ltOdFv1aqz1YIFhf4gTY8D7/ingus-info/BLOGS/Photography-stocks3/stock-photography-slider.jpg"/>
  </div>
  <div class="right">
    <h3>Some text</h3>
    <h3>Some more text</h3>
    <h3>Even more text</h3>
  </div>
<div>

<style type="text/css">
  .parent-container {
    display: flex;
    justify-content: space-between;
  }
  .image {
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .left {
    display: flex;
    flex-direction: column;
  }
  .right {
    display: flex;
    flex-direction: column;
  }
</style>

Flexbox here is your friend.

一些文本
更多的文字
更多文本
一些文本
更多的文字
更多文本
.父容器{
显示器：flex；
证明内容：之间的空间；
}
.形象{
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.左{
显示器：flex；
弯曲方向：立柱；
}
.对{
显示器：flex；
弯曲方向：立柱；
}
这是你的朋友。

是一个很好的起点。使用固定位置几乎从来都不是一个好方法

下面是使用css网格的示例：

.my container{
显示：网格；
网格模板柱：1fr 1fr 1fr；
网格模板区域：“左图像右”
}
.左{
网格区域：左侧；
}
.形象{
网格区域：图像；
}
.对{
网格区域：右；
}
.image>img{
最大高度：50vh；
}

一些文本
更多的文字
更多文本
一些文本
更多的文字
更多文本

我建议您使用bootstrap，layoutit.com是处理这些事情的好地方。您必须在html中创建拖放粘贴代码。

更适合CodeReview。绝对定位是一种非常糟糕的网页布局方法。它极不灵活，而且有更好、更灵活的选择。请检查我不能使用引导，因为我必须在Shopify上使用此代码

<div class="parent-container">
  <div class="left">
    <h3>Some text</h3>
    <h3>Some more text</h3>
    <h3>Even more text</h3>
  </div>
  <div class="image">
    <img src="https://filedn.com/ltOdFv1aqz1YIFhf4gTY8D7/ingus-info/BLOGS/Photography-stocks3/stock-photography-slider.jpg"/>
  </div>
  <div class="right">
    <h3>Some text</h3>
    <h3>Some more text</h3>
    <h3>Even more text</h3>
  </div>
<div>

<style type="text/css">
  .parent-container {
    display: flex;
    justify-content: space-between;
  }
  .image {
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .left {
    display: flex;
    flex-direction: column;
  }
  .right {
    display: flex;
    flex-direction: column;
  }
</style>

Flexbox here is your friend.