body {
text-align: center;
}<body>
<span>Today is Nick's birthday ?</span>
<img id="bff-img" src="nick.jpg">
<h2>24 years old</h2>
<h4>01.11.2022</h4>
</body>为什么SPAN标记是对齐的，而不是img标记？ 就我所知，文本对齐css属性设置块元素或表格单元格框内内联级内容的水平对齐方式.
请解释一下
body {
text-align: center;
}<body>
<span>Today is Nick's birthday ?</span>
<img id="bff-img" src="nick.jpg">
<h2>24 years old</h2>
<h4>01.11.2022</h4>
</body>为什么SPAN标记是对齐的，而不是img标记？ 就我所知，文本对齐css属性设置块元素或表格单元格框内内联级内容的水平对齐方式.
请解释一下
body {
text-align: center;
}<body>
<span>Today is Nick's birthday ?</span>
<br />
<img id="bff-img" src="nick.jpg">
<h2>24 years old</h2>
<h4>01.11.2022</h4>
</body>您的代码很好，并且图像与所有其他body的内联元素一起居中，您的问题是将图像放在一个内联元素旁边，这会阻止图像在一行中单独出现(因此您可以看到它居中)，预期的行为可以通过在img元素之后(可能是在img元素之前)的微小br元素来实现，这是最简单的，也不是最好的解决方案
另一种可以实现这一点的方法(我认为最好的解决方案)是将您的图像放在包装div中，并将text-align分配给该div，在这种情况下，您可以使用该父div对您的图像进行更多控制，
body {
text-align: center;
}
.img-wrapper { text-align : center ;} <body>
<span>Today is Nick's birthday ?</span>
<div class="img-wrapper" >
<img id="bff-img" src="nick.jpg">
</div>
<h2>24 years old</h2>
<h4>01.11.2022</h4>
</body>在这种情况下，正文的文本对齐不是必需的，我保留了它，以防您希望其他元素居中