如何将不在 div 中或跨度在 html/css 中的项目居中

Question

我有时会建立我的 html 网站，完成后需要添加一些我没想到会放在开头的东西，例如像两行之间的图像，所以我只是打开 img 标签并把图像而不将其放入 div 或跨度中。所以问题是我不知道如何将它居中。有没有办法让一个有父容器的项目居中？这是一个示例代码

<html><img src="img.jpg" alt="img"></html> <style>text-align: center;</style>

这段代码的问题是它不让任何东西居中我也尝试过使用所有可以居中的属性，比如“justify-content: center; or align-items: center;”但是 img dosent 根本没有移动，我只能通过使用 padding 或 margin 来移动它，这不是最好的方法。

有没有人知道我如何将一个项目居中，该项目有一个像 div 这样的父容器，或者这个项目在 html/css 中工作？

Answer 1

对于具体的图像，您可以使用 display: block 和 margin:0 auto，例如：<img src="img.jpg" style="display:block; margin:0 auto;" alt="img">

补充阅读：https://www.freecodecamp.org/news/how-to-center-an-image-in-css/

Answer 2

如果您想修复代码以使其正常工作，请务必在代码的 style 部分添加 html。像这样：

<html><img src="img.jpg" alt="img"></html> <style>html { text-align: center; }</style>

但这将使一切都居中。如果您只希望图像居中，请执行以下操作： <html><img src="img.jpg" id="myimage" alt="img"></html> <style>#myimage { text-align: center; }</style>

或

关于使用 display:block 和 margin:0 auto 有一个替代解决方案（其他人已经在此处发布）——这也是可行的。

这有两种方法可以为您服务：

选项 1：

<html><img src="img.jpg" style="display:block; margin:0 auto;" alt="you should probably leave alt blank if the image is decorative, otherwise actually describe what it is"></html> <style>html { text-align: center; }</style>

选项 2：

<html><img src="img.jpg" id="#myimage" alt="img"></html> <style>#myimage{ display:block;margin: 0 auto; }</style>

最终，它归结为实际学习 CSS 以及样式表的工作原理。您可能想对此做一些了解，在 youtube 和网站上找到一些“学习 CSS”视频——这是一些核心内容，所以如果您还不了解它，请多研究一下基础知识。

Answer 3

您可以将显示属性定义为“flex”。

<html><img src="img.jpg" class="Myimg"></html>

.Myimg
{
display: flex;
justify-content: center;
}

如何将不在 div 中或跨度在 html/css 中的项目居中

how to center Items that are not in div or span in html/css

html

css

center

division