Html 为什么赢了'；不管我使用了多少种不同的对齐功能，都不能将图像中心对齐？

我有这个图标，我想在我的文字上方。网站的这一部分写着“午餐”。在我的div中，如果我将图像放在文本之后，那么它将完全对齐中心。然而，如果我把它放在我想要的文本之前，它将不再居中。我还尝试将它放在单独的div、容器和类中。这也很奇怪，因为我的文本已经在对齐中心，而我还没有告诉它在CSS中，但它是我想要的

这使它能够集中：

午餐

请告诉我该怎么办

这就是我尝试约格什·辛格的答案时发生的情况：（）

---

[2] ：图片描述这里]

首先，你说文本居中，即使你没有添加任何这样的css，这是错误的。您已经按照CSS来执行文本“LAUNCH”：-

现在，使图像居中，您必须更改div的CSS，以包装img标记，如下所示：

.titlecontainer {
  width: 70%;
  margin: 0;
  display: grid;
  justify-content: center;
}

或

您可以使用

display:flex

或

---

将

text align:center

属性赋予包装器div将起作用，因为

text align

属性适用于块容器，而div是块容器。因此，

text align:center

到wrapper div将使图像和文本中心对齐。

还有一种简单的方法，只需替换text align:

好吧，代码对我来说很有用，但HTML语法有很多错误

HREF需要具有%26，而不是&

<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Catamaran:wght@300%26display=swap' type='text/css'>
<link href="https://fonts.googleapis.com/css2?family=PT+Sans%26display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Arsenal%26display=swap" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

午餐

---

这段代码不起作用。

您好，可能使用flexbox或表格单元格？值得怀疑的是：标题容器的宽度为70%。标题容器似乎被包装在

标记中。

img.center

的宽度为400px。我想这就是把事情搞砸的原因。你能删除代码，直到剩下足够的代码，这样问题就可以解决了吗？标题、导航等周围的所有额外代码只是分散注意力，似乎与问题无关。为什么人们总是对问题投否决票？字面上说这个人已经尝试了很多东西。甚至有人删除了他们的一些解释！哦，完整的东西没有弹出替换文本对齐：居中；与浮动：中心；不幸的是，我已经试过了。但是，谢谢你的回复！所以我尝试了这个，它只在一页上起作用。现在它显示为我在帖子中添加的图片（带有电子邮件图标的图片）好的。我认为与其为图像创建一个中心类，不如尝试应用

display:flex；将content:center

属性对齐到包装div。这样，您必须将中心类应用于希望图像居中对齐的div。

/*title*/

.titlecontainer {
  width: 70%;
  margin: 0;
}

img.center {
  display: block;
  width: 400px;
}

img.center,
.title {
  align-items: center;
}

.title {
  font-family: 'Catamaran', sans-serif;
  font-weight: 350;
  font-size: 350%;
  padding-top: 5%;
}

img.center,
.title {
  align-items: center;
}

.titlecontainer {
  width: 70%;
  margin: 0;
  display: grid;
  justify-content: center;
}

<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Catamaran:wght@300%26display=swap' type='text/css'>
<link href="https://fonts.googleapis.com/css2?family=PT+Sans%26display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Arsenal%26display=swap" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<div id="headerA">
            <header>
                <div class="container">
                    <img src="logoDE.png" alt="logo" class="logo">
                    <div id="myde">
                        <a class="a" href="https://d-e.myschoolapp.com/app#login">
                            <div class="myyDEcontainer">
                                <img src="myyDE.png" alt="myDE" class="myDE">
                            </div>
                        </a>
                    </div>
                    <div id="deorg">
                        <a class="de" href="https://www.d-e.org">d-e.org</a>
                    </div>
                </div>
            </header>
        <div class="headerB">
            <header>
                <div class="containerB">
                    <nav>
                        <ul>
                            <li><a class="a" href="ls6.html">LS + 6th Grade</a></li>
                            <li><a class="a" href="upms.html">MS & US</a></li>
                            <li><a class="a" href="staff.html">Staff Members</a></li>
                            <div class="dropdown">
                                <div class="hamburger container">
                                    <div class="dropbtn">
                                        <div="dropbtnicon">
                                            <div class="iconline"></div>
                                            <div class="iconline"></div>
                                            <div class="iconline"></div>
                                        </div>
                                        <i class="fa fa-caret-down"></i>
                                    </div>
                                </div>
                                <div class="dropdown-content">
                                    <a class="c" href="homepage.html">Covid Home Page</a>
                                    <a class="c" href="transportation.html">Transportation</a>
                                    <a class="c" href="maskguidelines.html">Mask Guidelines</a>
                                    <a class="c" href="lunch.html">Lunch</a>
                                    <a class="c" href="maps.html">Maps</a>
                                    <a class="c" href="emails.html">Dr. D's Emails</a>
                                    <a class="c" href="covideducation.html">COVID-19 Education</a>
                                </div>
                            </div>
                        </ul>
                    </nav>
                </div>
            </header>
            <center>
                <div class="titlecontainer">
                    <img src="lunch.png" class='center' />
                    <h1 class="title">LUNCH</h1>
                </div>
            </center>