Кнопка меняет местоположение на меньшем экране - как центрировать ее вместо "левое поле: 0"?

#css #wordpress #breakpoints

Вопрос:

Веб-сайт: https://bucksfoodpartnership.org/

Итак, на моем рабочем столе текст поверх верхнего изображения «Продовольственное партнерство Бакингемшира считает, что каждый имеет право на питание» и кнопка «Принять участие» выровнены слева с 10% — ной разницей. Однако на меньшем экране текст центрирован (как и должно быть), но кнопка выровнена по крайнему левому краю. Как я могу сделать его также центрированным (не все время, только когда текст выше центрирован)?

Я думаю, что этот класс выравнивает его по левому краю:

 .content-caption {
    max-width: 100%;
    left: 0;
    position: relative;
    text-align: center;

но добавив

 position: relative; 
left: 50%;
transform: translateX(-50%);

или

 margin: auto;

На самом деле это не помогает. Я что, лаю не на то дерево?

Ответ №1:

Все, что вам нужно сделать, это установить wp-block-button width:100% .

 .wp-block-button{
 width:100%;
}

Из-за всех унаследованных стилей и того inline-block , как вы себя ведете, text-align:center это будет работать для вас. Даже через ваши точки останова.