Question

我想在页面顶部放一个小图片，标识要准确。我已经设置了引导列，以便图像将跨越的两列是中心，但图像本身不会在它跨越的两列中居中。 Dreamweaver实时视图证实了这一点。

代码：

<body>

<div class="container-fluid">
<div class="row">
<div class="col-sm-2 col-sm-offset-5">

<img src="Img/Logo.png" id="logo2">

</div>
</div>
</div>


</body>
</html>

CSS：

body {
background-color:#DEE7E7;

}


#logo2 {
position:absolute;
width:30%
}

＃logo2 id主要是我试图将它居中，而删除它并不能解决问题。我查看了bootstrap文档，但无法弄清楚。

Answer 1

您可以使用Bootstrap的text-align: center;类将text-center应用于图像的容器。 E.g：

<div class="col-sm-2 col-sm-offset-5 text-center">
  <img src="Img/Logo.png" id="logo2">
</div>

在此处阅读更多内容：http://getbootstrap.com/css/#type-alignment

或者您可以将logo2设置为显示为具有自动边距的块。 E.g：

#logo2{
  display: block;
  margin: 0 auto;
  max-width: 100%;
}

Answer 2

#logo2 {
    display: table;
    margin: 0 auto;
}

这张图片不会集中在它的自举列中

2 个答案: