Question

我有以下代码的标题。当我改为不同尺寸时，图像不居中。如何将图像置于所有大小视图中心。

  <div class="jumbotron">
        <img src="images/header.jpg" alt="Banner" class="img-responsive">
   </div>

Answer 1

您可以在css文件中使用此更改：

<div class="row">
    <span class="col-md-12 col-lg-4">X</span>
    <span class="col-md-12 col-lg-4">Y</span>
    <span class="col-md-12 col-lg-4">Z</span>
</div>

或者更具体（我更喜欢）：

// Center all elements in jumbotron, if <img> is not in display block
.jumbotron{
    text-align:center;
}

Answer 2

如果我没错，你想要做的就是让图像居中于.jumbotron的中间位置。为此，您可以使用 CSS Flexbox ：

＆＃13;

.jumbotron {
  display: flex;
  justify-content: center;
  align-items: center;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron">
   <img src="images/header.jpg" alt="Banner" class="img-responsive">
 </div>

＆＃13;

这会将img置于.jumbotron的确切中心，水平和垂直。

干杯！

jumbotron图像不居中

2 个答案: