Как выравнять по центру?

Question

[yoyoyooyoyoyoyoyoyoyoyoyo]

Как можно сверстать, чтобы столбики были выравнены по левому краю (как сейчас), но hover эффект (розовый как на скрине) появлялся по центру ?

<li class="dropdown"><a href="<?php echo $category['href']; ?>" class="dropdown-toggle"><?php echo $category['name']; ?></a>
          <div class="dropdown-menu">
            <div class="dropdown-inner">
              <?php foreach (array_chunk($category['children'], ceil(count($category['children']) / $category['column'])) as $children) { ?>
              <ul class="list-unstyled">
                <?php foreach ($children as $child) { ?>
                <li class="drop-dva"><a href="<?php echo $child['href']; ?>"><?php echo $child['name']; ?></a></li>
                <?php } ?>
              </ul>
              <?php } ?>
            </div>
             </div>
        </li>

#menu .dropdown-inner {
	display: table;
	margin: 0 auto;
}
#menu .dropdown-inner ul {
	display: table-cell;
}
#menu .dropdown-inner a {
    display: block;
    width: 135px;
    padding: 5px 5px 5px 5px;
    margin: 20px;
    clear: both;
    color: #1d1d1d;
    font-size: 18px;
    text-align: left;
}

#menu .dropdown-inner li a:hover {
	color: #fff;
	background:#ff9acc;
	border-radius: 55px;
	text-align: left;
}

Сейчас у меня так

Comments

[Yupiter7575]

По центру относительно луны?

[Рома Зварич]

Вы пробовали запускать пустой проект с выложенным Вами кодом?
Как Вам помочь, если не с чем работать?

[yoyoyooyoyoyoyoyoyoyoyoyo]

Yupiter7575, чтобы текст оказался по центру ховер эффекта (розовый фон)

[yoyoyooyoyoyoyoyoyoyoyoyo]

Рома Зварич, извиняюсь, у меня тут все вразброс идет. Выложил то, с чем работал ранее

Answer 1

[Виталий Першин]

Если бы предоставили вменяемую разметку было бы проще, но примерно так:

#menu .dropdown-inner {
  display: table;
  margin: 0 auto;
}
#menu .dropdown-inner ul {
  display: table-cell;
}

#menu .dropdown-inner li {
    display: block;
    width: 135px;
    margin: 20px;
    text-align: left;
}
#menu .dropdown-inner a {
    display: inline-block;
    padding: 5px 5px 5px 5px;
    clear: both;
    color: #1d1d1d;
    font-size: 18px;
    text-align: left;
}

#menu .dropdown-inner li a:hover {
  color: #fff;
  background:#ff9acc;
  border-radius: 55px;
  text-align: left;
}

Comments

[yoyoyooyoyoyoyoyoyoyoyoyo]

Спасибо всем!

Answer 2

[Yupiter7575]

Возможно так

Answer 3

[Elena Fire]

Через псевдоэлемент при ховере. Этакий изврат.
Через padding для a. Задать левый padding больше остальных, тогда при ховере текст будет попадать на середину. Тоже так себе вариант.
Через text-align: center; у a при ховере. Правда, будет скакать текст при наведении. Может вызвать приступ тошноты.

Главный вопрос: а зачем по центру? Тексты неодинаковые по длине. Значит и вид при применении этого "по центру" будет меняться при проходе по спискам. Это будет УЖАСНО. Ни один юзер это не примет с восторгом - см. выше про тошноту.