Question

我已经看过很多关于此的帖子，我知道这很简单，但是我无法让我的例子工作，我想理解为什么我还没有掌握CSS中定位的概念。

我在我的应用程序中使用简单的引导程序。我有container row和col-md-6。我的代码看起来像这样。

<section id="automat" class="box bg-light-grey">
   <div class="container">
      <div class="row">
         <div class="col-md-6 col-md-offset-3">
            <img src="images/iPod.png" class="scaleImage"/>
         </div>
      </div>
   </div>
</section>

我的图像自定义css样式看起来像这样（取决于屏幕尺寸，我将控制img元素的大小）。

.scaleImage {
    width:300px;
    height:auto;
    position:relative;
    margin:0 auto;
}

如您所见，我尝试使用width和position:relative设置元素的确切margin:0 auto。根据其他帖子，这应该足以将我的元素集中在我的容器中，但事实并非如此。它仍然锁定在col-md-6容器的最左侧。

我的问题如下：为什么我的解决方案无效，我如何更改代码才能使其正常工作？

Answer 1

这有效吗？

<div class="container">
   <div class="row">
      <div class="col-md-3"></div>
      <div class="col-md-6 text-center">
         <img src="images/iPod.png" class="scaleImage" style="width:100%;height:100%"/>
      </div>
      <div class="col-md-3"></div>
   </div>
</div>

Answer 2

你可以这样试试，

section{
  background: gray;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section id="automat" class="box bg-light-grey">
  <div class="container text-center">
    <div class="row">
      <div class="col-md-6 col-md-offset-3">
        <img src="https://www.sfu.ca/content/sfu/publicsquare/_jcr_content/below-nav/parsys/image.img.jpg/1406566003083.jpg" class="scaleImage" />
      </div>
    </div>
  </div>
</section>

Answer 3

你可以使用bootstrap class＆＃39; text-center＆＃39;到中心。因此，您不需要使用margin：0 auto。

这里你也定义了一个偏移量。您不需要偏移来居中div。

＆＃13;

.scaleImage {
    width:300px;
    height:auto;
    position:relative;
}

＆＃13;

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="automat" class="box bg-light-grey">
        <div class="container">
            <div class="row">
                <div class="col-md-6 col-md-offset-3 text-center">
                    <img src="https://d3nevzfk7ii3be.cloudfront.net/igi/tcbxa1Eb6YMETIW2.large" class="scaleImage"/>
                </div>
            </div>
        </div>
</section>

＆＃13;

Answer 4

margin: 0 auto无效，因为image是内联块元素（look：Why doesn't margin:auto center an image?）要在父div或text-align: center上对齐图片<div class="container text-center">。

Answer 5

尝试再向col-md-6添加一个类text-center。它将使内容对齐。

position:relative;
float:none;
width:100%;
max-width:300px;
margin:auto;
DISPLAY:BLOCK

所以要将元素置于中间位置，需要这种css属性组合

div中的中心元素解释

5 个答案: