html - 如何相对于文本定位图像？

Question

我正在尝试创建一种效果，其中文本居中，但图像位于文本的两侧，看起来像这样

|                    |
|        text[image] |
| [image]text        |
|                    |

我希望文本相对于 div 居中，但我希望图像位于文本的任一侧。我怎样才能做到这一点？这是我的 html 和 css:

<div class="text-container">
  <h1 class="text">text1</h1><span class="image"><img src="image.svg"></span>
</div> 

text-container {
    text-align: center;
}
text {
    display: inline;
}

问题在于 image 也被视为内联元素，因此整个结构(而不​​仅仅是文本)都居中。我该如何解决这个问题？

Answer 1

如果 img 在文本之前，则使用 display:flex 并设置 padding-right

.text-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

img{
width:50px;
height:50px;
}
.p-right{
 padding-right: 110px;
}

<div class="text-container">
  <div>
    <h1 >text1</h1>
  </div>
  <div>
     <img src="/image/3mG2d.jpg" />
  </div>
 
</div> 
<div class="text-container p-right">

  <div>
     <img src="/image/3mG2d.jpg" />
  </div>
   <div>
    <h1 >text1</h1>
  </div>
</div> 

<div class="text-container">
  <div>
    <h1 >text1</h1>
  </div>
  <div>
     <img src="/image/3mG2d.jpg" />
  </div>
 
</div> 
<div class="text-container p-right">

  <div>
     <img src="/image/3mG2d.jpg" />
  </div>
   <div>
    <h1 >text1</h1>
  </div>
</div>