我使用SiteOrigin的Page Builder，我有一个包含2个小部件的行。其中一个小部件有一些文本，另一个是图像。图像比文字大，所以我想垂直居中文字和图像，以便在页面上很好地显示。
我设法在Appearance中执行此操作＆gt;通过添加
自定义CSSfunding_source但是这意味着这个CSS加载在我博客的每一页上，而我只需要在1页上。我已经有很多CSS，如果没有必要，我不想添加更多。
所以我的问题是......我想在Widget Style中使用什么＆gt;属性＆gt; CSS样式得到相同的结果？我尝试使用上面的代码，但它不起作用。
以下是一个示例 - 查看底部的文字和图片 - Angular 1.5.3 docs
谢谢！
答案 0 :(得分：0)
我没有使用SiteOrigin的Page Builder，但假设您可以访问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。