PROSAGA码农传奇-html/HTML5-如何水平对齐文本和伴随图像？

如何水平对齐文本和伴随图像？

作者: 红蜻蜓
发布时间: 2024-07-04 01:22:05 (26天前)
转自：

<div class =“post-text”itemprop =“text”>
  <P>
    为了使文本水平居中，与图像相比，你可以绝对地保持它的位置。将它从顶部推出50％并将其推回自己的高度。因此，与左图像/图标相比，它将垂直居中。这就是我的意思：
  </p>
   <pre>
    <code>
      <div class="wrapper">
  <img src='https://picsum.photos/200/300/?random'>
  <span>
    <b>Diamonds: {valueY.value}</b>
  </span><br>
</div>

<div class="wrapper">
  <img src='https://picsum.photos/200/300/?blur'>
  <span>
    <b>Performance: {Performance}</b>
  </span>
</div>

</code>
  </pre>
  <P>
    我已经在div元素中包装了每个块，所以我可以相对地设置div位置。
  </p>
  <P>
    这是css：
  </p>
   <pre>
    <code>
      .wrapper { position: relative; }
img {
  vertical-align: bottom; margin-right: 10px; 
  width:32px; height:30px;
}
span {
  font-size:14px; color:#000000; display: inline-block; 
  position: absolute; 
/*  push it by 50% from top  */
  top: 50%;
/*  push it back of it's own height  */
  transform: translateY(-50%);
}

</code>
  </pre>
  <P>
    <a href="https://codepen.io/shihab_codepen/pen/eXyRwJ" rel="nofollow noreferrer">
      这是实时预览
    </A>
  </p>
</DIV>