html - 如何在div中居中跨度

Question

我有一个 div，里面有一个图像和一个带有文本的 span。如何将跨度居中放置在 div 的左侧？本质上，我正在尝试将文本向右移动，但这样做的方式将适用于响应式设计

  <div class="site-title">
<img style="vertical-align:middle" src="https://sustainablewestonma.000webhostapp.com/wp-content/uploads/2019/08/cropped-newswagimage-1.jpg" class="header-image" width="25%">
<span style="color:#518234;text-align:ce
  nter;">Educate ● Initiate ● Collaborate
</span>
  </div>

Answer 1

制作<span> display: inline-block ，另外给它一个 width略低于剩余空间。它已经有 text-align: center在上面，但请注意，由于换行符，这在您的代码段中没有正确应用。修复此问题并同时更改 display并添加 width将文本对齐到剩余空间的中心:

span {
  display: inline-block;
  width: 70%;
}

<div class="site-title">
  <img style="vertical-align:middle" src="https://sustainablewestonma.000webhostapp.com/wp-content/uploads/2019/08/cropped-newswagimage-1.jpg" class="header-image" width="25%">
  <span style="color:#518234;text-align:center;">Educate ● Initiate ● Collaborate
</span>
</div>