如何使用 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 元素对齐。

下面是这个操作的快速演示：

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

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

在您的具体情况下，文本对齐属性不会直接起作用，因为您使用了浮动属性。

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

.main {
  width: 100%;
  overflow: hidden;
  text-align:center;
}
.col {
  width: 30%;
  height: 100px;
  display:inline-block;
  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>

Answer 2

将 div 的显示模式更改为 inline-block 将允许它们在父元素中居中

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

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

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

如何使用 css 在中心并排对齐 5 div？

how to align 5 div side by side in center using css?

html

css

jquery

center

responsive-design