how i center div elements horizontally in css?

Question

How i can center div elements horizontally, so when i change the width of the browser, the last div go down with css?

So:

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

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

When i write:

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

Then after a element go down, all div elements go to the left side.

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


Be Aware: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>

怪癖行为的参考