текст вертикального центра рядом с слайдером

Я только начинаю с изучения html/css, поэтому я купил шаблон и установил wordpress и планировал немного поиграть с ним. Тем не менее, я застрял на этом, и это довольно annyoing, что я не могу понять это. На моей странице есть главный слайдер и слайдер событий под ним. Я хотел бы сосредоточить текст «События NE» и «Просмотреть все события» как вертикально, так и горизонтально с помощью ползунка.текст вертикального центра рядом с слайдером

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

<div class="wpb_wrapper"> 
<p style="text-align: center; vertical-align: middle;">NE Events</p> 
</div> 

<div class="wpb_wrapper"> 
<---slider shortcode---> 
</div> 

<div class="wpb_wrapper"> 
<a href="#">View All</a> 
</div>

первый элемент 1/12 столбцы сайта второй элемент является 10/12 колонны Третей 1/12

источник

2015-11-17 Telef Parol

Пожалуйста, прочитайте, как [Как создать минимальный, полный и проверенный пример] (http://stackoverflow.com/help/mcve) – sobolevn

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

Добавление следующего css сделает их центрированными по вертикали с помощью согласного ползунка между ними.

.vc_col-sm-1 { 
    padding-top: 27px; 
}

Это просто добавляет небольшой отступ, чтобы подтолкнуть текст немного вниз, так что если ползун изображения получить больше, вы должны также увеличить эту прокладку. Если вы хотите удалить прописку на мобильной версии, вы можете поместить тот же код, но 0px вместо 27, но его нужно будет поместить в размерный запрос на размер экрана в CSS, чтобы он начинался только тогда, когда экран меньше. .. как телефон.

источник

2015-11-17 23:39:08

Спасибо за ваш ответ. Ваше решение верно, но, как я уже говорил, есть ли другое лучшее решение? –

Вы хотели, чтобы это отображалось иначе, чем просто? Я думаю, если бы у меня была лучшая идея, где вы хотели, чтобы текст был, я мог бы попытаться понять что-то ... но если это то, что вы хотели, это, вероятно, было бы вашим лучшим решением. –

Да, это то, что я хотел. Хорошо, тогда ... Я продолжу это решение :). спасибо –

Ну, вы можете установить высоту для столбцов 1/12 или добавить еще один класс, чтобы в противном случае не влиять на другие столбцы. В вашем случае я думаю, что это примерно 80 пикселей. Затем установите высоту строки, равную высоте столбца. Этот метод предназначен только для текста с одним слоем.

.addtnl-class { 
    height: 80px; 
    line-height: 80px; 
}

Существует много способов автоматического выравнивания по вертикали текста в div. Просто найдите Google, и вы их найдете. :)

источник

2015-11-18 00:05:29

текст вертикального центра рядом с слайдером

ответ

Смежные вопросы