如何仅通过添加 CSS 使该图像居中对齐？ [关闭]答案

【问题标题】：How to get this image to align centre only by adding CSS? [closed]如何仅通过添加 CSS 使该图像居中对齐？ [关闭]
【发布时间】：2020-12-14 01:11:43
【问题描述】：

我今天已经尝试了几个小时，但我就是无法让这个头像图像/它的 div 对齐中心 - https://demo.notionware.shop/

我试过 display: block !important 和 margin-left: 0 !important; 和 margin-right: 0 !important;加上各种其他的东西。但有些东西正在阻止它。

我很乐意考虑同时对齐头像和标题，但我知道单独为后者做 text-align: center; 是一件简单的事情。

注意 - 我无法从该页面编辑或删除现有样式规则，只能注入可能优先的其他样式规则..

<div class="notion-header">
   <div class="notion-header__cover has-cover">
      <div style="display:block;overflow:hidden;position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;margin:0"><img alt="This Is A Test Page" src="/_next/image?url=https%3A%2F%2Fapi.super.so%2Fasset%2Fdemo.notionware.shop%2F234ac021-23e8-467d-9dc5-2178971f439c.jpg&amp;w=3840&amp;q=100" sizes="(max-width: 640px) 640px, (max-width: 750px) 750px, (max-width: 828px) 828px, (max-width: 1080px) 1080px, (max-width: 1200px) 1200px, (max-width: 1920px) 1920px, (max-width: 2048px) 2048px, 3840px" srcset="/_next/image?url=https%3A%2F%2Fapi.super.so%2Fasset%2Fdemo.notionware.shop%2F234ac021-23e8-467d-9dc5-2178971f439c.jpg&amp;w=640&amp;q=100 640w, /_next/image?url=https%3A%2F%2Fapi.super.so%2Fasset%2Fdemo.notionware.shop%2F234ac021-23e8-467d-9dc5-2178971f439c.jpg&amp;w=750&amp;q=100 750w, /_next/image?url=https%3A%2F%2Fapi.super.so%2Fasset%2Fdemo.notionware.shop%2F234ac021-23e8-467d-9dc5-2178971f439c.jpg&amp;w=828&amp;q=100 828w, /_next/image?url=https%3A%2F%2Fapi.super.so%2Fasset%2Fdemo.notionware.shop%2F234ac021-23e8-467d-9dc5-2178971f439c.jpg&amp;w=1080&amp;q=100 1080w, /_next/image?url=https%3A%2F%2Fapi.super.so%2Fasset%2Fdemo.notionware.shop%2F234ac021-23e8-467d-9dc5-2178971f439c.jpg&amp;w=1200&amp;q=100 1200w, /_next/image?url=https%3A%2F%2Fapi.super.so%2Fasset%2Fdemo.notionware.shop%2F234ac021-23e8-467d-9dc5-2178971f439c.jpg&amp;w=1920&amp;q=100 1920w, /_next/image?url=https%3A%2F%2Fapi.super.so%2Fasset%2Fdemo.notionware.shop%2F234ac021-23e8-467d-9dc5-2178971f439c.jpg&amp;w=2048&amp;q=100 2048w, /_next/image?url=https%3A%2F%2Fapi.super.so%2Fasset%2Fdemo.notionware.shop%2F234ac021-23e8-467d-9dc5-2178971f439c.jpg&amp;w=3840&amp;q=100 3840w" decoding="async" class="notion-header__cover-image" style="visibility:visible;position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;object-fit:cover;object-position:center 0%"></div>
   </div>
   <div class="notion-header__content has-cover has-icon-image">
      <div>
         <div class="notion-header__icon-wrapper has-cover has-icon-image">
            <div style="display:block;overflow:hidden;position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;margin:0"><img alt="This Is A Test Page" src="/_next/image?url=https%3A%2F%2Fapi.super.so%2Fasset%2Fdemo.notionware.shop%2F6b606527-0689-4fda-8920-312dfb151148.jpg&amp;w=3840&amp;q=100" sizes="(max-width: 640px) 640px, (max-width: 750px) 750px, (max-width: 828px) 828px, (max-width: 1080px) 1080px, (max-width: 1200px) 1200px, (max-width: 1920px) 1920px, (max-width: 2048px) 2048px, 3840px" srcset="/_next/image?url=https%3A%2F%2Fapi.super.so%2Fasset%2Fdemo.notionware.shop%2F6b606527-0689-4fda-8920-312dfb151148.jpg&amp;w=640&amp;q=100 640w, /_next/image?url=https%3A%2F%2Fapi.super.so%2Fasset%2Fdemo.notionware.shop%2F6b606527-0689-4fda-8920-312dfb151148.jpg&amp;w=750&amp;q=100 750w, /_next/image?url=https%3A%2F%2Fapi.super.so%2Fasset%2Fdemo.notionware.shop%2F6b606527-0689-4fda-8920-312dfb151148.jpg&amp;w=828&amp;q=100 828w, /_next/image?url=https%3A%2F%2Fapi.super.so%2Fasset%2Fdemo.notionware.shop%2F6b606527-0689-4fda-8920-312dfb151148.jpg&amp;w=1080&amp;q=100 1080w, /_next/image?url=https%3A%2F%2Fapi.super.so%2Fasset%2Fdemo.notionware.shop%2F6b606527-0689-4fda-8920-312dfb151148.jpg&amp;w=1200&amp;q=100 1200w, /_next/image?url=https%3A%2F%2Fapi.super.so%2Fasset%2Fdemo.notionware.shop%2F6b606527-0689-4fda-8920-312dfb151148.jpg&amp;w=1920&amp;q=100 1920w, /_next/image?url=https%3A%2F%2Fapi.super.so%2Fasset%2Fdemo.notionware.shop%2F6b606527-0689-4fda-8920-312dfb151148.jpg&amp;w=2048&amp;q=100 2048w, /_next/image?url=https%3A%2F%2Fapi.super.so%2Fasset%2Fdemo.notionware.shop%2F6b606527-0689-4fda-8920-312dfb151148.jpg&amp;w=3840&amp;q=100 3840w" decoding="async" class="notion-header__icon" style="visibility:visible;position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;object-fit:cover;object-position:center"></div>
         </div>
         <h1 class="notion-header__title">This Is A Test Page</h1>
      </div>
   </div>
</div>

【问题讨论】：

指向外部站点的链接不足以使问题成为一个好问题。代码（所有相关的 HTML/CSS/JS）应该作为文本包含在问题中，最好是在 Stack-Snippet 中。您应该阅读"How do I ask a good question"-article。相应地更新您的答案。在那之前，这个答案缺少细节。
理解并同意。我已经修改了添加代码的问题。谢谢。
所有三个答案似乎都达到了预期的效果有人愿意讨论应该接受哪一个吗？
这个决定取决于你，因为讨论是基于意见的。但是，您仍然可以（并且应该）对所有似乎有帮助的答案投赞成票。

标签： html css alignment

【解决方案1】：

看了你的demo，发现你没有对父母的图片风格做任何改动试试“has-icon-image”类：

.notion-header__icon-wrapper.has-cover.has-icon-image {
    margin: auto;
    left: 0;
    right: 0;
}

【讨论】：

【解决方案2】：

有班级的父母 “notion-header__icon-wrapper has-cover has-icon-image” 需要

  margin: 0 auto;
  left: 0;
  right: 0;

【讨论】：

在这种情况下，他们还需要!important
我没查过，但可能是这样

【解决方案3】：

您的解决方案；

HTML

<div class="notion-header__icon-wrapper has-cover has-icon-image"><img src="..."></div>

CSS

.notion-header__icon-wrapper.has-cover.has-icon-image {
position: relative;
margin-left: auto;
margin-right: auto;
display: block;
}

结果

【讨论】：

【解决方案4】：

.notion-header__icon-wrapper 有position: absolute，所以你可以给它left: 50%。现在它的左侧居中，但我们想将整个<div>居中。
我们可以使用transform: translate(-50%)将其向左平移其自身宽度的50%，使其居中。

【讨论】：