Question

我有代码：

HTML：

<div class=container1>
  <div class=container2>
    <div class="box">
      <div class="icon"></div>
      <div class="icon"></div>
      <div class="icon"></div>
      <div class="icon"></div>
    </div>
  </div>
  <div class=container2>
    <div class="box">
      <div class="icon"></div>
      <div class="icon"></div>
      <div class="icon"></div>
      <div class="icon"></div>
    </div>
  </div>
  <div class=container2>
    <div class="box">
      <div class="icon"></div>
      <div class="icon"></div>
      <div class="icon"></div>
      <div class="icon"></div>
    </div>
  </div>
  <div class=container2>
    <div class="box">
      <div class="icon"></div>
      <div class="icon"></div>
      <div class="icon"></div>
      <div class="icon"></div>
    </div>
  </div>
</div>

的CSS：

.container1 {
  background: yellow;
  height: 200px;
  position: relative !important;
  width: 260px !important;
}

.container2 {
  background: blue;
  border: solid 1px;
  float: left !important;
  height: 180px;
  /*position: relative; can't use, as it would limit icons inside this container*/
  text-align: center;
  width: 60px;
  }
.container2:hover .box {
  display: inline-block;
}

.box {
    background: red;
    border: solid 1px;
    display: none;
    height: 120px;
    position:absolute;
    text-align: center;
    top: 20px;

    width: 180px !important;
}

.box:first-child {
  text-align: left;
}

.icon {
  border: solid 1px;
  background: white;
  display: inline-block;
  height: 50px;
  width: 50px;
}

http://jsfiddle.net/388ygc74/10/

在IE（任何版本）上，text-align：center不起作用。

使.box宽度：100％的解决方案不适用，我需要它是固定的定义宽度。

有什么想法吗？

Answer 1

我认为那就是你要找的东西？

left:50%
margin-left:{-50% of elementh width}px;

添加特定选择器以添加要对齐的元素

:nth-child(4)

Answer 2

如何使用left: 30px;（因为您将width设置为60px）与z-index和position: relative一起玩？

（是的，你说没有position:relative;但它正在工作:)）

See it here

如何文本对齐：在IE上居中一个绝对元素？

2 个答案: