Pencere içindeki satırı dikey olarak hizala (Sayfa Oluşturucu)

Question

Page Builder'ı SiteOrigin'e göre kullanıyorum ve 2 widget'lı bir satır var. Widget'lardan bir tanesi bir metne, diğeri ise bir resme sahip. Görüntü metinden daha büyük olduğundan, hem metin hem de resim dikey olarak ortalamak ve böylece sayfada güzel bir şekilde görünmelerini istiyorum.

Ben

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

ekleyerek Görünüşü> Özel CSS bunu başardı Ama sadece 1 sayfada ihtiyaç iken, bu CSS bloguma her bir sayfada yüklenen demektir. Zaten çok fazla CSS var ve gerekirse daha fazla eklemek istemiyorum.

Sorularım, aynı sonucu elde etmek için Widget Stili> Nitelikler> CSS Stili'nde ne kullanacağımı tahmin ediyorum? Yukarıdaki kodu kullanmayı denedim ama işe yaramıyor.

İşte bir örnek - http://www.travelersuniverse.com/welcome

teşekkür ederiz - alt kısmına doğru metin ve resmi görmek!

Answer 1

Site Builder ile Page Builder ile herhangi bir deneyimim yok, ancak html'ye erişiminiz olduğunu varsayarak aşağıdaki çözümü kullanabilirsiniz. sadece birkaç CSS kuralları vardır ve yükleme süresiyle ilgili endişe duyuyorsanız

, bariz çözüm böyle css satır içi şudur:

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

Bu şekilde, hiçbir dış kaynakların yüklenir. !important gerekli değildir, çünkü CSS her zaman satır içi stiline öncelik verir.

Yukarıdaki kodu sitenizde test ettim ve widget'lar güzel bir şekilde algılandı. Ancak, CSS kodunu birkaç kez kullanacaksanız, CSS'nin kullanılması önerilmez.