css - 在容器内平均定位 div

Question

我在尝试将 5 个 div 内联放置在一个容器 div 中时遇到一些问题。

我已经创建了一个演示 Fiddle Demo

我也对悬停有问题(演示行为不正确)但是 css 在悬停时淡入而不是仅仅出现。

所以这是我的网格和容器的 CSS:

.span_5_of_5 {
    width: 100%;
}
.span_4_of_5 {
    width: 79.68%;
}
.span_3_of_5 {
    width: 59.36%;
}
.span_2_of_5 {
    width: 39.04%;
}
.span_1_of_5 {
    width: 18.72%;
}


.containeralt{
    margin: 0 auto;
    width: 900px;
    padding: 20px 0 0 0;
    position: relative;
}

此时如有任何帮助，我们将不胜感激。

Answer 1

我认为您所追求的行为可以通过使用 text-align:center; 来实现和 display:inline-block;

我已经将您的很多 HTML 精简为基础，因为有很多未使用的 <spans>甚至是 <center> ，未使用的类，一些未发布的 Javascript 中可能使用的额外代码等...不确定那里发生了什么，所以我删除了任何不必要的东西，这是我认为你所追求的基础知识:

HTML:

<div id="imgDiv3">
  <div class="wrapper">
      <div class="circle"></div>
      <p class="circletext">APPS</p>
  </div>
  <div class="wrapper">
      <div class="circle"></div>
      <p class="circletext">WEB DESIGN</p>
  </div>
  <div class="wrapper">
      <div class="tabletouter">
      </div>
  </div>
  <div class="wrapper">
      <div class="circle"></div>
      <p class="circletext">MOBILE</p>
  </div>
  <div class="wrapper">
      <div class="circle"></div>
      <p class="circletext">PC/MAC</p>
  </div>
</div>

CSS:

div.circle {
    border-radius: 60px;
    height: 120px;
    width: 120px;
    background-color: #3B5163;
}

div.tabletouter {
    width: 295px;
    height: 354px;
    border-radius: 10px;
    background-color: #3B5163;
    background-repeat: no-repeat;
    background-position: center center;
}

.circletext {
    font-family:"museo-slab";
    font-size: 17px;
    line-height: 26px;
    font-weight: 300;
    color: #666666;
}

#imgDiv3 {
    width: 100%;
    text-align: center;
}

.wrapper {
    display: inline-block;
    margin:0 20px;
}

fiddle :http://jsfiddle.net/uwjC7/