时间戳

首页 > 解决方案 > 如何使图像和文本居中？

html - 如何使图像和文本居中？

问题描述

当我使用时align-text: centre，文本居中，但图像在左侧，float: none;没有帮助。我错过了什么？

<table class="universe1" align="center">
  <tbody>
    <tr>
      <td>
        <div class="descriptext2" style="text-align: center; padding-top: 5px;">Text here<br><br>
        </div>
        <strong><img style="width: 48px; height: 48px; float: left;" src="https://file-qA333tsLkr.png">     Right text</strong> <br>     <a href="mailto:email" target="_blank" rel="noopener noreferrer"><span style="color: #e12121;">right text</span><br><br><br></a>
        <strong> <img style="width: 48px; height: 48px; float: left;" src="https://file-qA333tsLkr.png"> Right text</strong><br><span style="color: #e82424;">     <a style="color: #e82424;" href="http://link.here" target="_blank" rel="noopener noreferrer">Right text<br><br><br></a></span>        <strong> <img style="width: 48px; height: 48px; float: left;" src="https://file-qA333tsLkr.png">     Right text</strong><br><span style="color: #e82424;">     <a style="color: #e82424;" href="https://contact.us" target="_blank" rel="noopener noreferrer">Right text<br><br><br></a></span>
        <strong> <img style="width: 48px; height: 48px; float: left;" src="https://file-qA333tsLkr.png">     Right text</strong><br><span style="color: #e82424;">     <a style="color: #e82424;" _blank="" rel="noopener noreferrer">Right text<br>      Right text<br><br><br><br></a></span>
      </td>
    </tr>
  </tbody>
</table>

标签： htmlcssalignmenttext-alignmentcenter-align

解决方案

这实际上取决于您希望它如何居中。

要水平居中内容（使得图像和其下方的文本都居中），请使用容器并将flex-directionto 列设置为使每个连续的图像/文本对出现在下一行中。然后，使用该属性以及该属性将两个项目放置在纬度中间，以便文本在块元素本身中水平居中（而不是从右侧开始）：align-itemstext-align

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Vertical alignment */
  justify-content: center;
  text-align: center;
}
<div class="descriptext2" style="text-align: center; padding-top: 5px;">Text here</div>
<br>
<div class="container">
  <img style="width: 48px; height: 48px; float: left;" src="https://file-qA333tsLkr.png">
  <p>
    <strong>Right text</strong>
    <br>
    <span style="color: #e12121;"><a href="mailto:email" target="_blank" rel="noopener noreferrer">Right text</a></span>
  </p>
</div>
<br>
<div class="container">
  <img style="width: 48px; height: 48px; float: left;" src="https://file-qA333tsLkr.png">
  <p>
    <strong>Right text</strong>
    <br>
    <span style="color: #e82424;"><a style="color: #e82424;" href="http://link.here" target="_blank" rel="noopener noreferrer">Right text</a></span>
  </p>
</div>

要使内容垂直居中（使图像和旁边的文本都纵向居中），请使用容器并使用该属性将这两个项目放置在中间，纵向使用该属性。请注意，您可以将属性（出现在第一个示例中）设置为使得每个连续的图像/文本出现在同一行中，即“背靠背”。但是，上面和下面的示例都使用列：align-itemsjustify-contentflex-direction:row

.container {
  display: flex;
  justify-content: center; /* Horizontal alignment */
  align-items: center;
  /* Vertical alignment */
}
<div class="descriptext2" style="text-align: center; padding-top: 5px;">Text here</div>
<br>
<div class="container">
  <img style="width: 48px; height: 48px; float: left;" src="https://file-qA333tsLkr.png">
  <p>
    <strong>Right text</strong>
    <br>
    <span style="color: #e12121;"><a href="mailto:email" target="_blank" rel="noopener noreferrer">Right text</a></span>
  </p>
</div>
<br>
<div class="container">
  <img style="width: 48px; height: 48px; float: left;" src="https://file-qA333tsLkr.png" vertical-align: "middle">
  <p>
    <strong>Right text</strong>
    <br>
    <span style="color: #e82424;"><a style="color: #e82424;" href="http://link.here" target="_blank" rel="noopener noreferrer">Right text</a></span>
  </p>
</div>

推荐阅读