使用 css 将图像居中答案

【问题标题】：using css to center images使用 css 将图像居中
【发布时间】：2022-10-03 00:05:37
【问题描述】：

我希望将图像和文本放入行中。我尝试了 flex-direction 以查看是否可以翻转它，并尝试使用 align-item 垂直控制它，但所发生的只是容器向左侧移动。

body {
  font-family: \'Courier New\', Courier, monospace;
}

img {
  width: 100px;
  height: 100px;
}

.title {
  font-size: 36px;
  font-weight: 900;

}

/* do not edit this footer */
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eee;
}
body{

  text-align:center;

}
.container{
 display: flex;
  justify-content: center;
  gap: 52px;}
  
.in{
  
  max-width: 200px;

}
.title{
  margin-bottom: 32px;
}

<!DOCTYPE html>
<html lang=\"en\">
  <head>
    <meta charset=\"UTF-8\">
    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">
    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
    <title>Information</title>
    <link rel=\"stylesheet\" href=\"style.css\">
  </head>
  <body>
    <div class=\"title\">Information!</div>
<div class=\"container\">
    <div class=\"in\">
    <img src=\"./images/barberry.png\" alt=\"barberry\">
    <div class=\"text\">This is a type of plant. We love this one.</div>
<div class=\"in\">
    <img src=\"./images/chilli.png\" alt=\"chili\">
    <div class=\"text\">This is another type of plant. Isn\'t it nice?</div>
<div class=\"in\">
    <img src=\"./images/pepper.png\" alt=\"pepper\">
    <div class=\"text\">We have so many plants. Yay plants.</div>
<div class=\"in\">
    <img src=\"./images/saffron.png\" alt=\"saffron\">
    <div class=\"text\">I\'m running out of things to say about plants.</div>

    <!-- disregard this section, it\'s here to give attribution to the creator of these icons -->
    <div class=\"footer\">
      <div>Icons made by <a href=\"https://www.flaticon.com/authors/icongeek26\" title=\"Icongeek26\">Icongeek26</a> from <a href=\"https://www.flaticon.com/\" title=\"Flaticon\">www.flaticon.com</a></div>
    </div>
</div>
</div>
</div>
    </div>
  </body>
</html>

请更新您的图像源以使用图像占位符服务程序。
还请单击代码 sn-p 中的 TIDY 按钮，以便代码格式正确，并且您缺少结束 `</div>` 标记，请也添加该标记。

标签： javascript html css

【解决方案1】：

您只是将标签错误地放在上面的代码中。尝试修复并将图像和文本放在一行上。

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案2】：

你的代码有一个错误，那就是你没有正确关闭 div.in 标签，我希望这能解决问题

【讨论】：

在您的答案中添加更正的代码可能有助于理解您的答案。

【解决方案3】：

我认为你最后有 2 个额外的没有关闭任何标签，如果你想使用 div.in 作为行，你应该首先为容器分配一个宽度

.container{ diplay:flex; gap: 52px; width: 100%; justify-content:center; flex-wrap: wrap}

最后，从容器中取出页脚，因为它是绝对定位的，因为它是 flex 标签的子元素而丢失它的属性是没有意义的

【讨论】：

【解决方案4】：

您只是将标签错误地放在上面的代码中。尝试修复并将图像和文本放在一行

【讨论】：