Question

我如何将div元素水平居中，所以当我改变浏览器的宽度时，最后一个div会用css下去？

所以：

---||||-||||-||||---

--------||||--------

我写的时候：

<div style="float: left; position: relative; left: 50%;">
  <div style="float: left; position: relative; left: -50%;">
    <div style="width:315px; height:340px; float: left; margin-top: 10px; margin-bottom: 10px;">Text</div>
    <div style="width:315px; height:340px; float: left; margin-top: 10px; margin-bottom: 10px;">Text</div>
    ...
  </div>
</div>

然后在元素关闭后，所有div元素都会转到左侧。

Answer 1

我建议在元素上使用display: inline-block，然后在容器上使用text-align: center来处理您想要的居中：

我清理了你的HTML，但这里是基本的HTML格式，其中包含container类和多个（尽可能多的）block类DIV：

<div class="container">
    <div class="block">Text</div>
    <div class="block">Text</div>
    <div class="block">Text</div>
</div>

CSS修改块的显示设置和容器的文本对齐方式：

div.block { 
  display: inline-block; /* this changes the elements to behave more like inline elements (think <span>s) */
  width: 315px; 
  margin: 10px 0; 
  height: 340px; 
}
div.container { 
  width: 100%; 
  text-align: center;  /* this is the magic that centers the elements */
}

我整理了一个小型演示，可以帮助演示这种方法： JSFIDDLE

要注意： display: inline-block CSS存在一个小'怪癖'。它会导致元素之间出现少量空间。这可以通过多种方式删除，我首选的方法是使用注释或包装DIV的结束标记。（问题是由HTML中元素之间的返回/空格引起的）：

<div class="container">
    <div class="block">Text</div><!--
    --><div class="block">Text</div><!--
    --><div class="block">Text</div>
</div>

<div class="container">
    <div class="block">Text</div
    ><div class="block">Text</div
    ><div class="block">Text</div>
</div>

reference for the quirk behavior

Answer 2

创建一个容器<div>，它是给定区域的100％。然后将容器内的每个<div>宽度设置为％和float: left;。它们将彼此相邻堆叠，直到它们不适合并且将突破到下一行。

.container {
  width: 100%;
}
.three {
  width: 33%;
  min-width: 225px;
  float: left;
  border: 1px solid black;
}

<div class="container">
  
  <div class="three">
    <p>Something</p>
  </div>
  
  <div class="three">
    <p>Something</p>
  </div>
  
  <div class="three">
    <p>Something</p>
  </div>
  
</div>

运行代码段。

Answer 3

您可以使用媒体查询为不同大小编写不同的CSS代码：

Media Queries

我如何在css中水平居中div元素？

3 个答案: