Html 宽度未知的水平定位（和较小的父元素）

我想在CSS3中创建简单的工具提示

例如：

HTML示例（如有必要，可以更改）：

问题是-我不知道如何将工具提示集中在共享图标下方（它们将是字体图标）。如果我知道它们的宽度就不会复杂了，但我不知道

---

任何想法都值得赞赏。无论如何都有可能吗？

您可以随时执行类似于此演示的操作：

我更新了

a

标签，然后在

.icons

div内更新。以下是我更改的内容：

.icons a {
    display:block;
    margin-right:10px /* spacing between a tags - changed from your original code */
    float:left; 
    text-align:center; 
    width:100px; /* you can change this as needed, but it keeps them all uniform*/
    height: 50px; /* Change this to the height of your tallest icon image */
}

<div class="icons">
    <a href="#">t
        <span class="tooltip" data-text='Twitter'></span>
    </a>
    <a href="#">f
        <span class="tooltip" data-text="Facebook"></span>
    </a>
    <a href="#">g
        <span class="tooltip" data-text='Google+'></span>
    </a>
</div>​

.icons a {
    display: inline-block;
    position: relative;
    margin-right: 70px;
    width: 16px;
    color: #000;
    font-size: 16px;
    text-align: center;
    text-decoration: none;
}
.tooltip {
    position: absolute;
    bottom: -20px; left: 8px; /* half the width of link */
    margin-left: -35px;
    width: 70px;
    color: #fff;
    font: 10px Arial, sans-serif;
}
.tooltip:after {
    display: inline-block;
    padding: 2px 8px;
    background-color: green;
    content: attr(data-text);
}

然后，我相应地更新了

span.工具提示

，我将此添加到您拥有的内容中：

.tooltip { 
    width:100%;
    padding: 2px 0; /* changed the side padding to 0 since width is 100% & it takes the text-align center from the CSS above on the a tag */
    display:block; /* Made it a block so the width 100% & centered text would work */
}​

---

这与图标图像的确切大小无关-它们可能不同或相同，但只要over

a

标记比最高最宽的图像更宽、更高，您就不会有任何问题。

为什么不使用=>width:auto

您可以尝试这样做：

在

span

上使用固定（足够大）的

宽度
，在其上设置
text align:center
，并将文本放在一个伪元素中，您将
display:inline block

HTML：

.icons a {
    display:block;
    margin-right:10px /* spacing between a tags - changed from your original code */
    float:left; 
    text-align:center; 
    width:100px; /* you can change this as needed, but it keeps them all uniform*/
    height: 50px; /* Change this to the height of your tallest icon image */
}

<div class="icons">
    <a href="#">t
        <span class="tooltip" data-text='Twitter'></span>
    </a>
    <a href="#">f
        <span class="tooltip" data-text="Facebook"></span>
    </a>
    <a href="#">g
        <span class="tooltip" data-text='Google+'></span>
    </a>
</div>​

.icons a {
    display: inline-block;
    position: relative;
    margin-right: 70px;
    width: 16px;
    color: #000;
    font-size: 16px;
    text-align: center;
    text-decoration: none;
}
.tooltip {
    position: absolute;
    bottom: -20px; left: 8px; /* half the width of link */
    margin-left: -35px;
    width: 70px;
    color: #fff;
    font: 10px Arial, sans-serif;
}
.tooltip:after {
    display: inline-block;
    padding: 2px 8px;
    background-color: green;
    content: attr(data-text);
}

是的，但它是固定宽度的。我需要一个解决方案，其中的工具提示可以是无限的宽度。那么我们这样做：-宽度仍然是固定的，但高度是无限的。看起来这只适用于社交媒体图标，所以我想我很困惑为什么一开始就需要这么大的宽度/高度？是的，但我的意思是-我需要文本来适应矩形，除了填充之外没有其他像素：）所以，我最初的问题是如何将未知宽度的容器放在另一个小宽度的容器的中心。谢谢你的例子！你使用的工具提示是什么？一些JS/jQuery可以在工具提示上为您提供中心功能…我希望它是CSS3唯一的解决方案-我知道这是可能的，但到目前为止我还没有弄清楚。太棒了！非常感谢你！