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

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浏览器（所有版本）文本对齐：中心不起作用。

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

有什么想法？

来源

2016-04-14 Tom Brito

我得到了错误的“页上的错误”要与IE8.Chrome引用jsfiddle.net链接没有产生后这个错误。 – JohnH

如何使用left: 30px;元素（因为你设置的width到60px）与z-index和position: relative玩？

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

See it here

来源

2016-04-14 18:37:18

它的作品，但'.container2'将有可变宽度，并不总是60px ...：/ –

左：50％;在这种情况下;）http://jsfiddle.net/388ygc74/14/ –

我想这就是你要找的？

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

添加特定的选择以添加要对齐

:nth-child(4)

来源

2016-04-14 18:36:41 Vlad

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

回答

相关问题