如何使用css在中心并排排列5个div？

Question

我有问题让div总是居中，当我们去标签时......

实际上有什么：

HTML

.main {
  width: 100%;
  overflow: hidden;
}
.col {
  width: 30%;
  height: 100px;
  float: left;
  background: #09c;
  margin-right: 2%;
  margin-bottom: 5px;
}

<div class="main">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

http://jsfiddle.net/ravinthranath/2q3q08f7/

实际需要的是什么：！

你能帮我解决这个问题......？

Answer 1

将方块包裹在容器中并向其添加text-align:center。

这不仅可以将文本与中心对齐 - 它还可以对齐div元素。

以下是此操作的快速演示：

＆＃13;

＆＃13;

.wrap{
  text-align:center;
  }
.box{
  height:24vw;
  width:24vw;
  background:aqua;
  margin:1vw;
  display:inline-block;
  }

＆＃13;

<div class="wrap">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

在您的特定情况下，由于您使用了float属性，text align属性将无法直接使用。

将col col更改为display:inline-block而不是 float:left 将允许您以这种方式对齐它们：

＆＃13;

＆＃13;

.main {
  width: 100%;
  overflow: hidden;
  text-align:center;
}
.col {
  width: 30%;
  height: 100px;
  display:inline-block;
  background: #09c;
  margin-right: 2%;
  margin-bottom: 5px;
}

＆＃13;

<div class="main">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

将div的显示模式更改为inline-block将允许您将它们置于父元素中心

＆＃13;

＆＃13;

.wrap {
    text-align: center;
}
.wrap > div {
    display: inline-block;
    width: 120px;
    height: 120px;
    background: #1ea0e9;
    margin: 20px;
}

＆＃13;

<div class="wrap">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以尝试这样做： Demo

的CSS：

 .center {
    margin:0 auto;
    display:block;
    text-align:center;
    width: 100%;
    overflow: hidden;
}
.box {
    width: 30%;
    height: 100px;
    background: #09c;
    margin-right: 2%;
    margin-bottom: 5px;
    height:140px;
    display:inline-block;
}

HTML：

<div class="center">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

Answer 4

这里是demo

<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>

.container{
  text-align: center;
}
.box{
  height: 100px;
  width: 100px;
  background: #bada55;
  display: inline-block;
  margin-right: 15px;
  margin-bottom: 15px;
}