文章/答案/技术大牛

发布

问jumbotron图像未居中
EN

Stack Overflow用户

提问于 2017-02-02 00:19:00

回答 2查看 6.4K关注 0票数 1

我有下面的头代码。当我更改为不同大小时，图像不会居中。如何使图像居中显示所有大小的视图。

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

twitter-bootstrap

html

css

回答 2

Stack Overflow用户

发布于 2017-02-02 00:24:04

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

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

或者这样，更具体(我更喜欢)：

// Set the <img> in display block and use margin auto to center
.jumbotron img{
    display:block;
    margin-left:auto;
    margin-right:auto;
}

票数 1

Stack Overflow用户

发布于 2017-02-02 00:47:29

如果我没记错的话，这里你想做的是让图像居中在你的.jumbotron中间。为此，您可以使用

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

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

这将使img在.jumbotron的水平和垂直中心居中。

干杯!

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/41984596

复制

相似问题

问jumbotron图像未居中
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jumbotron图像未居中EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jumbotron图像未居中
EN