Question

当我使用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>

Answer 1

我已经编写了一个代码段。请看一看。我已经删除了float: left标记中的<img>属性。我为display: block;标签添加了margin: 0 auto;和<img> CSS。我不确定我是否理解正确。

img {
  display: block;
  margin: 0 auto;
}

<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;" 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;" 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;" 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;" 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>

Answer 2

这实际上取决于您要如何居中。

要水平将内容居中（以使图像和文本下方居中整个），请使用容器并设置flex-direction列，以便每个连续的图像/文本对出现在下一行。然后，使用align-items属性和text-align属性，将两个项目均横向放置在中间，以使文本在block元素本身中水平居中（相对到右边的开头）：

.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-items属性在中间纵向中使用项目，并使用justify-content属性在纵向中使用。请注意，您可以将flex-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>

如何将图像和文本居中放置？

2 个答案: