2016-04-08 3 views
0

Я использую построитель страниц по SiteOrigin, и у меня есть строка с 2 виджетами. У одного из виджетов есть текст, другой - изображение. Изображение больше, чем текст, поэтому я хотел бы вертикально центрировать текст и изображение, чтобы они хорошо отображались на странице.Вертикально выровнять виджет внутри строки (построитель страниц)

мне удалось это сделать в Appearance> Пользовательские CSS, добавив

#pgc-x-x-x.panel-grid-cell { 
display: inline-block; 
float: none !important; 
vertical-align: middle; } 

Но это означает, что этот CSS загружается на каждой странице моего блога, а мне это нужно только на 1 странице. У меня уже много CSS, и я не хочу добавлять еще больше, если не нужно.

Так что мой вопрос: что я могу использовать в стиле виджета> Атрибуты> Стиль CSS, чтобы получить тот же результат? Я попытался использовать вышеуказанный код, но он не работает.

Вот пример - смотри текст и изображения в направлении нижней части - http://www.travelersuniverse.com/welcome

Спасибо!

+0

Вы беспокоитесь о дополнительном времени загрузки этих трех правил CSS на других страницах? Я бы не стал беспокоиться об этом. Если бы это было несколько сотен правил, это было бы иначе. –

+0

Проблема в том, что я добавляю и добавляю новые правила CSS, и теперь их довольно много, и многие из них применяются только к одной странице. Вот почему я хочу узнать, как это сделать, чтобы я мог применять эти знания и на других страницах. – Laura

+0

Google Page Speed ​​дает мне предупреждение «Приоритизировать видимый контент», так как на большинстве сообщений только 40% окончательного содержимого сверху могут быть отображены с полным ответом HTML. Поэтому мне нужно разобраться в этом. У меня слишком много загрузок CSS без необходимости. – Laura

ответ

0

У меня нет опыта работы с Page Builder от SiteOrigin, но при условии, что у вас есть доступ к html, вы можете использовать это решение ниже.

Если у вас есть только несколько правил CSS, и беспокоятся о времени загрузки, очевидное решение встраивать в CSS, как это:

<div class="panel-grid-cell" id="pgc-70-1-0" style="display: inline-block;float: none;vertical-align: middle;"><div class="so-panel widget widget_black-studio-tinymce widget_black_studio_tinymce panel-first-child panel-last-child" id="panel-70-1-0-0" data-index="1"><div class="textwidget"><p style="font-size: 24px; text-align: right;">Thank you so much for being here.<br> You've just made my day.</p><p style="text-align: right;"><span style="color: #ff3366;"><strong>Laura Iancu<br> </strong></span><span style="font-size: 14px;">Founder, Travelers Universe</span></p></div></div></div> 

<div class="panel-grid-cell" id="pgc-70-1-1" style="display: inline-block;float: none;vertical-align: middle;"><div class="so-panel widget widget_black-studio-tinymce widget_black_studio_tinymce panel-first-child panel-last-child" id="panel-70-1-1-0" data-index="2"><div class="textwidget"><p><img class="wp-image-2950 alignnone" title="Laura" src="http://www.travelersuniverse.com/wp-content/uploads/2014/03/laura_pic.jpg" alt="Laura" width="200" height="200"></p></div></div></div> 

Таким образом, никакие внешние ресурсы не будут загружены. !important также не является необходимым, поскольку CSS всегда будет определять приоритет встроенного стиля.

Я протестировал код выше на вашем сайте, и виджеты хорошо подобраны. Однако вложение CSS не рекомендуется, если вы собираетесь использовать код CSS несколько раз.

+0

У меня нет доступа к HTML как таковой. Я могу добавить CSS для каждой строки и каждого виджета. Но добавление 'display: inline-block; float: none; vertical-align: middle;' не делает трюк. Фактически, для каждого виджета у меня есть следующие поля: «Класс Widget» и «CSS Styles» (один атрибут стиля для каждой строки). Думаю, добавление правильных строк кода здесь устранит проблему. – Laura

+0

Я бы предположил, что CSS Styles - это тот, который вы должны использовать, чтобы получить встроенный стиль. Вы пытались использовать его и проверяли, когда вы посещаете сайт? Код в моем ответе действительно работал, когда я добавил его на вашу страницу, поэтому вам следует попробовать добавить его, а затем проверить, чтобы увидеть, что действительно добавлено. – tjespe

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