尝试在CSS中居中对齐标题图像

Question

我试图让横幅图像在所有尺寸的屏幕上居中...它在较小的屏幕上看起来很好但屏幕较大，它向左拉。

这是我到目前为止所尝试的内容：

.banner {
    padding-top: 150px;
    margin: 0 auto;
    background-position: center;
    background-size: cover;
}

<div class="banner">
  <div class="row">
      <img src="Banner3.jpg" class="img-responsive"/>
  </div>
</div>

谢谢！

Answer 1

只需将display:block和margin:auto应用于您的图片......如果您使用的是bootstrap3，请在图片中使用center-block课程。

Stack Snippet

.banner {
  padding-top: 150px;
  margin: 0 auto;
  background-position: center;
  background-size: cover;
}

.banner img {
  display: block;
  margin: auto;
}

<div class="banner">
  <div class="row">
    <img src="http://via.placeholder.com/350x150" class="img-responsive" />
  </div>
</div>

Answer 2

您可以使用以下代码，因为我已修改它。 希望这对你有用。

template <typename T>
Dynamic(const T& x) = delete;

Dynamic(char x) { /* Your code */ };
Dynamic(short x) { /* Your code */ };
Dynamic(std::size_t x) { /* Your code */ };
...