如何将图像和文本居中在一起?

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

我做了一个代码片段。请看一看。我已经删除了<img>标签中的float: left属性。我已经为<img>标签添加了display: block;和margin: 0 auto;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属性将两个项目放在中间纬度，以便文本在块元素本身中水平居中(而不是从右侧开始(：

.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>