居中工具提示內聯列表框

正如你可以在jsfiddle中看到我的工具提示框正在工作，但令人討厭的是，他們不在中心。由於缺乏更好的單詞，這些框似乎「幾乎集中在一起」。即使我把它作爲CSS代碼中心。居中工具提示內聯列表框

謝謝。

li { 
 
    display: inline; 
 
    background-color: #ff0000; 
 
} 
 

 
.horizontal-list a { 
 
    float: left; 
 
    width: 8em; 
 
    text-decoration: none; 
 
    color: white; 
 
    background-color: #0094ff; 
 
    padding: 0.2em 0.4em; 
 
    border-right: 1px solid white; 
 
    text-align: center; 
 
} 
 

 
.horizontal-list a span { 
 
    display: none; 
 
    position: relative; 
 
    align-self: absolute; 
 
} 
 

 
.horizontal-list a:hover span { 
 
    display: block; 
 
    width: 100px; 
 
    padding: 10px; 
 
    color: #FFF; 
 
    background: #535663; 
 
    font-size: 11px; 
 
    text-decoration: none; 
 
    position:absolute; 
 
    margin-right:auto 0; 
 
    margin-left:auto 0;

<ul class="horizontal-list"> 
 
       <li><a href="Google.com"><img src="images.png" onmousedown="return false;" alt="aaaaaa" /><span id="tooltipmain">aaaaaa</span></a></li> 
 
       <li><a href="Google.com"><img src="images.png" onmousedown="return false;" alt="aaaaaa" /><span>aaaaaa</span></a></li> 
 
       <li><a href="#"><img src="images.png" onmousedown="return false;" alt="aaaaaa" /><span>aaaaaa</span></a></li> 
 
       <li><a href="#"><img src="images.png" onmousedown="return false;" alt="aaaaaa" /><span>aaaaaa</span></a></li> 
 
       <li><a href="#"><img src="images.png" onmousedown="return false;" alt="aaaaaa" /><span>aaaaaa</span></a></li>

http://jsfiddle.net/ud2pajtb/7/ 遺憾的拼寫錯誤。

來源

2015-05-09 Chris

由於您的<span>被絕對定位，所以設置margin:0 auto不會使其相對於父元素居中。現在它的對齊基本上是基於它的寬度，所以爲了讓工具提示看起來居中，稍微增加它的寬度。

http://jsfiddle.net/xw3z1890/
這裏我簡單地設置<span>寬度爲109px。

來源

2015-05-09 06:24:11 Adam

居中工具提示內聯列表框

回答

相關問題