时间戳

首页 > 解决方案 > 为什么我的图像没有按照我喜欢的方式对齐？

html - 为什么我的图像没有按照我喜欢的方式对齐？

问题描述

我的 CSS 有什么问题？为什么我的图像不居中？
我已经尝试过margin: 0;，display: block;但这不起作用。

<style>
   .card-header img{
      width: 100%;
      height: auto;
      padding: 20px;
      margin: 0 auto; //this one already try
      display: block; //also this one
   }
   .banner-banner {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      margin-right: 0;
      margin-left: -5px;
      background: linear-gradient(to bottom, #230343 0%, #A558F1 100%);
   }

</style>

标签： htmlcss

解决方案

我假设您正在寻找一张分为 header\body\footer 的卡片（类似这样）

您发送的图像的宽度为 100%，因此它没有任何位置可以将自身与中心对齐。

我建议您在整个卡片标题上使用背景图像，或者将您的图像更改为具有低于其容器的宽度。

如果您更改图像的宽度，这也可以解决问题：

.card-header {
  display: flex;
  justify-content: center;
}

推荐阅读