Кнопка меню / текст в Wordpress не выровнены с липким меню

Question

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

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

.button-menu {
background-color: #0051a3;
width: 100px;
height: 30px;
text-align: center;
vertical-align: central;
border-radius: 10px 10px 10px 10px;
    }
.button-menu:hover {
  background: #fbb714;
  text-decoration: none;
  }

Я просто хочу, чтобы текст центрировался на фоне кнопки при вертикальном выравнивании, когда меню находится в режиме прокрутки.

Answer 1

Ваша кнопка имеет фиксированную ширину и высоту, но текст внутри нее будет выпадать в несколько строк, поскольку это поведение браузера по умолчанию.Вы можете попробовать поиграть с

.button-menu{ word-wrap: break-word; }

или, возможно, также попробовать использовать минимальную ширину и минимальную высоту вместо установки ширины и высоты.