Question

我想知道如何在div中居中3个div。

这是我的代码示例

＆＃13;

body {
  position: fixed;
  height: 100%;
  width: 100%;
}
#container {
  border: 3px solid black;
  height: 90%;
  width: 90%;
}
.plaatje {
  width: 30%;
  height: 70%;
  border: 2px solid black;
  float: left;
  text-align: center;
}
#plaatje1 {
  background-image: url("http://image.prntscr.com/image/c3d5dbc04f664a3386b372d8e4ceb4c7.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
#plaatje2 {
  background-image: url("http://image.prntscr.com/image/2bcfd124f98a448cbae822337818ff4e.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
#plaatje3 {
  background-image: url("http://image.prntscr.com/image/e1b7059d626f47cb94535bbba9887cc1.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

＆＃13;

<div id="container">
  <div id="plaatje1" class="plaatje">
  </div>

  <div id="plaatje2" class="plaatje">

  </div>
  <div id="plaatje3" class="plaatje">

  </div>
</div>

＆＃13;

问题是，图片的右侧仍然有一个空白区域，我已经标记了它，所以你知道我在说什么。

它还需要缩放，所以如果我调整窗口大小，第三个图像不会在第一个图像下面弹出，或者当我完全调整它时，该空间就存在。

感谢任何帮助。

Answer 1

您只需尝试将text-align:center;添加到容器div

即可

Answer 2

有很多方法可以做到这一点，你应该从http://www.w3schools.com/css/css_align.asp开始 - 这个基本级别的问题经常被标记为不适合SO。

但是！欢迎。这是你可以做到这一点的一种方式 - 我已经添加了评论来解释发生了什么。基本上你的float: left根据定义使.plaatje无法居中;并且text-align: center需要在包含元素

上

＆＃13;

body {
  position: fixed; /* probably don't actually want */
  height: 100%;
  width: 100%;
  margin: 0; /* add */
}
#container {
  border: 3px solid black;
  height: 90%;
  width: 90%;
  margin-left: 5%;
  text-align: center; /* add */
}
.plaatje {
  width: 30%;
  height: 70%;
  border: 2px solid black;
  /* float: left;        // remove
  text-align: center;*/
  display: inline-block; /* add */
}
#plaatje1 {
  background-image: url("http://image.prntscr.com/image/c3d5dbc04f664a3386b372d8e4ceb4c7.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
#plaatje2 {
  background-image: url("http://image.prntscr.com/image/2bcfd124f98a448cbae822337818ff4e.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
#plaatje3 {
  background-image: url("http://image.prntscr.com/image/e1b7059d626f47cb94535bbba9887cc1.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

＆＃13;

<div id="container">
  <div id="plaatje1" class="plaatje">
  </div><div id="plaatje2" class="plaatje">

  </div><div id="plaatje3" class="plaatje">

  </div>
</div>

<!-- removed spaces between the divs -->

＆＃13;

Answer 3

我创建了一个jsFiddle，演示了如何使用flexbox执行此操作。它不需要浮动元素，并为您提供您正在寻找的内容。

我在图像（.images）周围添加了一个包装器，并为其提供了对齐其内容所需的flex属性，然后删除了浮动和其他一些不必要的东西。

以下是对flexbox的浏览器支持：caniuse:flexbox

＆＃13;

body {
    position: fixed;
    height: 100%;
    width: 100%;
}
#container {
    border: 3px solid black;
    height: 90%;
    width: 90%;
}
.images {
  height: 90%;
  display: flex;
  justify-content: center;
}
.plaatje {
    width: 30%;
    height: 70%;
    border: 2px solid black;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
#plaatje1 {
    background-image: url("http://image.prntscr.com/image/c3d5dbc04f664a3386b372d8e4ceb4c7.png");
}
#plaatje2 {
    background-image: url("http://image.prntscr.com/image/2bcfd124f98a448cbae822337818ff4e.png");
}
#plaatje3 {
    background-image: url("http://image.prntscr.com/image/e1b7059d626f47cb94535bbba9887cc1.png");
}

＆＃13;

<div id="container">
  <div class="images">
        <div id="plaatje1" class="plaatje"></div>
        <div id="plaatje2" class="plaatje"></div> 
        <div id="plaatje3" class="plaatje"></div>
    </div>
</div>

＆＃13;

如何将元素置于元素内部

3 个答案: