使用 Display flex [重复] 时，宽度和高度会改变与中心的对齐方式答案

【问题标题】：Width and height change the alignment from center when utilizing Display flex [duplicate]使用 Display flex [重复] 时，宽度和高度会改变与中心的对齐方式
【发布时间】：2022-12-15 12:27:08
【问题描述】：

本质上，我有一个带有徽标、边框和图像的页脚 - 我正在尝试更改图像和页脚本身的大小，但是当使用 flex 时，如果我更改图像，则图像将左对齐（而不是居中）宽度或高度。

<template>
  <div class="footer">
    <div class="logoFooter">
      <img src="Logo.png" alt="logo" />
    </div>
  </div>
</template>

.footer {
  display: flex;
  border-top-style: solid;
  border-color: #90caf9;
  flex: 1;
  background-color: #050c13;
}

.logoFooter {
  display: flex;
  place-items: center;
}

img {
  max-width: 75%;
  max-height: 75%;
}

关于为什么会这样的任何建议？

【问题讨论】：

标签： html css flexbox

【解决方案1】：

使用justify-content和align-items代替place-items

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.footer {
  display: flex;
  justify-content: center;
  border-top-style: solid;
  border-color: #90caf9;
  flex: 1;
  background-color: #050c13;
}

.logoFooter {
  display: flex;
  justify-content: center;
  align-items: center;
}

img {
  max-width: 75%;
  max-height: 75%;
}
</style>
</head>
<body>

<div class="footer">
    <div class="logoFooter">
      <img src="logo.png" alt="logo" />
    </div>
  </div>

</body>
</html>

【讨论】：