如何仅通过添加 CSS 来使此图像居中对齐？

Question

我今天已经试了几个小时了，但就是无法让这个头像 image/its 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>

Answer 1

.notion-header__icon-wrapper有position: absolute，可以给left: 50%。现在它的左侧居中，但我们希望整个 <div>.
居中我们可以使用 transform: translate(-50%).

将它向左平移其自身宽度的 50% 以使其居中

Answer 2

您的解决方案；

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;
}

结果

Answer 3

parent 与 class “notion-header__icon-wrapper has-cover has-icon-image” 需要

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

Answer 4

我看了你的演示，发现你没有对parent的图片风格做任何改动尝试“has-icon-image” class :

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

如何仅通过添加 CSS 来使此图像居中对齐？

How to get this image to align centre only by adding CSS?

html

css

alignment