Question

我采用了一些代码来使徽标在视差图像的顶部具有透明背景。一旦完成此操作，由于某种原因，我可以将徽标重新显示在屏幕中央。有人可以告诉我我在做什么错吗？

HTML

<body>
  <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
      ...
</nav>

<div id="homepage-front-logo">
    <img src="images/logo-placeholder.png" class="img-fluid" />
</div>
<div class="parallax-header-image"></div>
</body>

CSS

.homepage-front-logo {
  width: 200px;
  padding: 15px;
  position: relative;
  opacity: 0.5;
}

#homepage-front-logo {
  position: absolute; 
  width: 300px;
  display: block;
}

Answer 1

不确定我是否理解正确，但是您应该可以通过更改＃homepage-front-logo CSS

来使图像居中

#homepage-front-logo {
  width: 300px;
  display: block;
  margin: 0 auto;
  text-align: center;
}

Answer 2

.homepage-front-logo {
  width: 200px;
  padding: 15px;
  position: relative;
  opacity: 0.5;
}

#homepage-front-logo img {
/*     position: absolute; */
  width: 80px;
  height: 80px;
  display: block;
  margin: 0 auto;
  
}

<body>
  <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
      ...
</nav>

<div id="homepage-front-logo">
   <img src="https://i.ibb.co/129nyzN/qqqlogo.jpg" class="img-fluid" />
</div>
<div class="parallax-header-image"></div>
</body>

Answer 3

仅具有Bootstrap本机类的解决方案，无需修改CSS。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<body>
  <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
      ...
</nav>

<div class="d-flex flex-row justify-content-center" id="homepage-front-logo">
   <img src="https://i.ibb.co/129nyzN/qqqlogo.jpg" class="img-fluid mx-auto" />
</div>
<div class="parallax-header-image"></div>
</body>

Answer 4

我知道了。我添加了一个红色边框，以便可以看到实际的div，并且发现width是元凶。它居中，但我告诉周围的div只有300px宽。我将其更改为100％，然后使用@ abney317的text-align想法，然后再保存。

.homepage-front-logo {
  position: absolute; 
  width: 100%;
  display: block;
  text-align: center;
}

Bootstrap中的中心映像

4 个答案: