html - 幅が不明な水平方向の配置 (および小さな親要素)

Question

CSS3で簡単なツールチップを作りたいです。

例: http://jsfiddle.net/Cg2SX/

HTML の例 (必要に応じて変更できます):

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

そしてCSS：

    .icons { position: absolute; left: 40px; top: 30px; }
    .icons a { text-decoration:none; font-size: 16px; color: #000000; position: relative; margin-right: 70px; border:1px solid red; }
    .icons a:hover { text-decoration:none; }
    .tooltip { background-color: green; color: #FFFFFF; font-family: Arial,sans-serif; font-size: 10px; padding: 2px 8px; bottom: -20px; position: absolute; }​

問題は、共有アイコンの下にツールチップを中央に配置する方法がわかりません（フォントアイコンになります）。それらの幅を知っていれば複雑ではありませんが、私は知りません。

どんなアイデアでも大歓迎です。とにかくそれは可能ですか？

Answer 1

次のようにしてみてください。

更新されたフィドル

で固定（十分に大きい）を使用し、widthその上spanで設定text-align: centerし、指定した疑似要素にテキストを配置しますdisplay: inline-block

HTML :

<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>​

関連するCSS :

.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);
}

Answer 2

このデモのようなことはいつでもできます: http://jsfiddle.net/Cg2SX/1/

aタグを更新してから、 .iconsdiv内で更新しました。これが私が変更したものです：

.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 */
}

span.tooltip次に、それに応じて更新し、これをあなたが持っていたものに追加しました：

.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 */
}​

これは、アイコン イメージの正確なサイズには関係ありません。それらはすべて異なっていても同じでもかまいませんが、オーバーaタグが幅が広く、幅が最も広い画像よりも高くなっている限り、問題はないはずです。

Answer 3

=> width:auto; で作業しないのはなぜですか。