Ответ 1

Проблема заключается в использовании позиционирования absolute и метода, который вы используете, чтобы попытаться сосредоточить его. Если вы поместите элемент абсолютно, метод ol 'margin: 0 auto; не будет работать, чтобы центрировать вещь. Я указываю вам объяснение, почему это в конце вопроса, но в случае, если вы просто хотите, чтобы это сработало, пусть сначала займется решением.

Вот какой рабочий код. Просмотр на JSFiddle

#tool-menu li {
  ...
  position: relative;
}

li.current:after {
  ...
  position: absolute;
  width: 10px;
  top: 6;
  left: 50%;
  margin-left: -5px;
}

Давайте сломаем, что происходит здесь.

Настройка нового содержащего блока

В исходном Fiddle псевдоэлемент расположен абсолютно по отношению к окну просмотра. Примером может быть лучший способ показать, что это значит, и почему мы этого не хотим. Подумайте о настройке на top: 0. Это удерживало бы его в верхней части окна браузера (или, в данном случае, кадра JSFiddle), а не родителя (li). Итак, если наше меню оказалось в нижней части страницы или даже перемещено, псевдоэлемент будет плавать независимо от него, застрял бы в верхней части страницы.

Это поведение по умолчанию абсолютно позиционированного элемента, когда вы явно не устанавливаете позицию для каких-либо родительских элементов. Мы хотим, чтобы его позиция была определена относительно родителя. Если мы это сделаем, псевдоэлемент будет придерживаться родителя, независимо от того, где это происходит.

Чтобы это произошло, вам нужно установить родительский элемент #tool-menu li, чтобы он был явно установлен (что означает, что он должен быть чем-то другим, кроме position: static). Если вы решите использовать position: relative;, он не изменит вычисленное местоположение родителя на странице и сделает то, что мы хотим. Поэтому, почему я использовал этот.

В техническом плане то, что мы делаем здесь, создает новый содержащий блок для ребенка.

Позиционирование псевдоэлемента

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

Если вы это сделаете, вы увидите, что это выравнивает левый край псевдоэлемента на 50%. Это не то, что мы хотим – мы хотим, чтобы центр псевдоэлемента находился посередине. И поэтому я добавил отрицательный margin-left. Это немного ускоряет его, чтобы выровнять середину с центром родителя.

И как только мы это сделаем, он сосредоточился! Brilliance!

Почему мой margin: auto; не работал?

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

Ответ 2

Использование calc к центру

Вы также можете использовать функцию calc в css для центрирования псевдоэлемента.

Примечание. Это не поддерживается в IE8 и ниже (caniuse), но вы можете предоставить резерв для старых браузеров.

Посмотрите на это кодовое перо. Я также использую метод MarkP css border для рисования треугольника.

li.current:after {
  content: '';
  display: block;
  height: 0;
  position: absolute;
  width: 0;
  overflow: hidden;
  bottom: -5px;
  left: calc(50% - 5px);
  z-index: 2;
  border-top: 5px #256f9e solid;
  border-left: 5px transparent solid;
  border-right: 5px transparent solid;
}

Ответ 3

Не связано напрямую (уже проголосовали за jmeas), но вы также можете использовать CSS-трюк для создания треугольника. например

li.current:after {
    content: '';
    display: block;
    height: 0;
    position: absolute;
    width: 0;
    overflow:hidden;
    bottom: 0;
    left: 50%;
    margin: 0 0 -5px -5px;
    z-index: 99;
    border-top: 5px #256f9e solid;
    border-left: 5px transparent solid;
    border-right: 5px transparent solid;
}

Аналогичная тактика относительно того, что предложил jmea относительно вертикального позиционирования. Мы выровняем нижнюю часть, а затем используем отрицательный край дна, чтобы вывести его в нужное место.

Ответ 4

Не было бы лучше просто определить ширину в процентах, сделать ее блочным элементом и выровнять по центру в центре?

"float: center;" недействителен и не будет работать. Смешивание плавающих и абсолютных позиционированных элементов - это верный способ получить проблемы с вашим макетом, поскольку они действительно не работают так хорошо.

Попробуйте что-то вроде этого:

li.current:after {
content: 'YOUR CONTENT';
display: block;
width: 100%;
text-align: center; }

Ответ 5

Использование margin:auto для центрирования

Пока элемент имеет объявленную ширину, вы можете использовать метод абсолютного центрирования.

Чтобы использовать этот метод, свойства right и left должны быть установлены на 0, чтобы margin: auto был эффективным.

Этот метод может быть расширен для реализации горизонтального центрирования.

см. ссылку для полной информации:

http://www.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/

li.current:after {
  content: "";
  position: absolute;
  display: block;
  right: 0;
  bottom: -5px;
  left: 0;
  margin: auto;
  border-width: 5px;
  border-style: solid;
  border-color: transparent;
  border-top-color: #256f9e;
  width: 200px;
  height: 200px;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

<div>
  <ul>
    <li class="current"></li>
  </ul>
</div>

Ответ 6

С псевдоэлементом: after или: before use display: inline-block;

Попробуйте что-то вроде этого:

content: url(../images/no-result.png);
display: inline-block;
width: 100%;
text-align: center;