@yoyoyooyoyoyoyoyoyoyoyoyo

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

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

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


Сейчас у меня так
  • Вопрос задан
  • 103 просмотра
Решения вопроса 1
Get-Web
@Get-Web
Front-End Developer
Если бы предоставили вменяемую разметку было бы проще, но примерно так:
#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;
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
BormotunJedy
@BormotunJedy
Верстальщик
Через псевдоэлемент при ховере. Этакий изврат.
Через padding для a. Задать левый padding больше остальных, тогда при ховере текст будет попадать на середину. Тоже так себе вариант.
Через text-align: center; у a при ховере. Правда, будет скакать текст при наведении. Может вызвать приступ тошноты.

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы