我的图像不会水平和居中浮动，而是垂直和居中

Question

当我使用

align: center

时，我想要浮动的图像仍然在页面上左对齐

但是当我使用 display: flex 时，它们都居中，但垂直。我试图让它们保持水平，但我不知道是什么影响了它们。我试图将它们置于第二个（粉色）框的中心

#base {
  margin: auto;
  width: 1300px;
  display: flex;
  margin-top: -10px;
  margin-bottom: -10px;
}

#left {
  width: 260px;
}

#right {
  width: 300px;
}

#center {
  width: 850px;
  background-image: url(https://fancyparts.com/fancyparts/cg/pattern/strip_a/strip_a50.gif);
  margin: 0 auto;
  margin-top: 10px;
  margin-bottom: 30px;
  border-radius: 30px;
  border: 5px outset #ff8282;
}

#headliner {
  height: 20px;
  margin-left: 140px;
  margin-right: 10px;
}

#navi {
  border-width: 8px;
  border-style: solid;
  border-image: url("") 30 fill round;
  width: 170px;
  margin-top: 0px;
  margin-left: 45px;
}

.centerimage {
  width: 50%;
  size: 40px;
  max-width: 40px;
  max-height: 40px;
}

<img src="https://i.postimg.cc/YSp3TDc2/v.gif" style=";" margin-bottom:="" 18px;="" class="centerimage">
<img src="https://i.postimg.cc/jjZXT6KH/i.gif" style="vertical-align: center;" margin-bottom:="" 18px;="" class="centerimage">
<div id="base">
  <div id="left">
    <div id="headliner"></div>
    <div id="navi">
      <div id="titulo">navigate</div>
      <button class="buttonA"><a href="(LINK)"> homepage </a> <img src="" width="15"> </button>
      <div id="titulo">socials</div>
      <button class="buttonA"><a href="(lINK)"> about me </a> <img src="" width="15"> </button>
    </div>
  </div>
  <div id="center">
    <div class="border"></div>
    <div id="top">
    </div>
  </div>
</div>

<div id="right">
</div>

Answer 1

要水平对齐图像但保持左对齐，请学习 CSS Flexbox。在容器上使用 justify-content 和align-items 等属性 (#base)。检查图像上是否有冲突的样式。了解 Flexbox 将帮助您轻松解决类似的布局问题。