html - CSS 在响应式移动设备上显示我的图像的中心

Question

我有一个网站，在展示部分的 div 上有一个 Logo 图像...我希望我的图片在移动设备上响应...以显示图片的中心，目前我的网站只显示左下角。

这是我的 html 代码:

<section id="showcase">
<div class="container">
  <h1>Espaço para eventos Roda D'Água</h1>
  <p>Um ótimo lugar para confraternizações, reuniões familiares e outros eventos.</p>
</div>

这是我的展示 CSS:

#showcase {
  min-height:400px;
  background:url('SrcImgHere') no-repeat 0 -400px;
  max-width: 100%;
  height: auto;
  display:block;
  text-align:center;
  color:#ffffff;
}

我应该更改什么以在移动设备上显示我的图像的中心？如果您想“实时”测试，请链接到我的网站: http://espacorodadagua.dx.am/index.php

Answer 1

使用 background-position: center; 使背景图像居中。

如果您希望仅针对移动设备更改位置 -

@media (max-width: 576px) {
    #showcase {
        background-position: center;
    }
}