CSS: центрирование всплывающей подсказки для кнопки по горизонтали? - PullRequest
Новая
       3

CSS: центрирование всплывающей подсказки для кнопки по горизонтали?

1 голос
/ 14 ноября 2011

Я просто не могу найти решение этой проблемы.У меня есть следующая структура.Это всего лишь одна из пяти пунктов меню, поэтому обычно в этом ul. 

<nav id="loggedInMenu">
    <ul role="navigation">
         <li>
            <a class="homeBtn" href="/my">
                <span class="homeBtnTooltip btn tt" title="Homepage">Homepage</span>
            </a>
         </li>
    </ul>
</nav>

есть пять <li> пунктов.Я сделал живой пример моего кода ... проверить это.http://jsfiddle.net/Ngjzk/1/

Таким образом, как правило, скрепка скрыта и отображается только тогда, когда я наведите курсор мыши на зеленый значок.Однако это не проблема, это просто отлично работает.

Я просто понятия не имею, как мне удается выровнять саму подсказку по центру под зеленым btn.

Итак, прямо сейчас, как вы можете видеть, синяя подсказка находится прямо под зеленым btn.Он должен быть выровнен по центру под кнопкой.

Я прокомментировал мой маленький "хак", чтобы сделать это прямо сейчас в разделе CSS.Раскомментируйте последние строки в CSS, чтобы увидеть, к чему я стремлюсь.

Однако я не хочу иметь этот странный хак и размещать каждую подсказку для каждого пункта меню с отрицательным полем слева.Тем более, что текст для всплывающих подсказок изменяется динамически, поэтому подсказка всегда должна иметь всю ширину текста и выравниваться по центру под каждой кнопкой.

Есть идеи, как это сделать?

Спасибо

Ответы [ 2 ]

4 голосов
/ 14 ноября 2011

редактировать [толкнул правильный ответ вверх и историю этого ответа до конца]

Хорошо, вы должны использовать двойную позицию; первый (внешний диапазон, position absolute; left: 50%) и второй (внутренний диапазон, position relative; left: -50%)

http://jsfiddle.net/HerrSerker/Ngjzk/10/

оригинал
Попробуйте «динамический» процентный отрицательный запас слева 

#menu .tt {
  text-align: center;
  position: absolute;
  top: 38px;
  margin-left: -50%;
}

редактировать
Если вы можете изменить свой HTML, попробуйте span за пределами a http://jsfiddle.net/HerrSerker/Ngjzk/5/

2 голосов
/ 14 ноября 2011

ВЫ можете сделать это с использованием :after или поставить дополнительно span

Проверьте это

http://jsfiddle.net/Ngjzk/11/

ОБНОВЛЕНО:

http://jsfiddle.net/Ngjzk/14/

...