我使用SiteOrigin的页面生成器，并且我有一行2个小部件。其中一个小部件有一些文字，另一个是图像。图片比文字大，所以我想垂直居中放置文字和图片，以便在页面上很好地显示。垂直对齐小部件内部行（页面生成器）
我设法做到这一点在外观>自定义CSS加入
#pgc-x-x-x.panel-grid-cell {
display: inline-block;
float: none !important;
vertical-align: middle; }
但这意味着这个CSS加载我的博客的每个页面上，而我只需要1页。我已经有很多CSS，如果不需要，我不想添加更多。
所以我的问题是...我想在Widget Style> Attributes> CSS Style中使用什么来获得相同的结果？我尝试使用上面的代码，但它不起作用。
下面是一个例子 - 看对底部的文本和图像 - http://www.travelersuniverse.com/welcome
谢谢！
我对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。
您是否担心这3个CSS规则在其他页面上的额外加载时间？我不会为此担心。如果是几百条规则，那么情况就会不同。 –
问题是，我一直在添加和添加新的CSS规则，现在它们相当多，其中很多仅适用于1页。这就是为什么我想学习如何做到这一点，以便我可以将这些知识应用到其他页面。 – Laura
Google Page Speed也给了我一个'优先考虑可视内容'的警告，因为在大多数帖子中，只有40％的最终上面的内容可以通过完整的HTML响应呈现。所以我需要整理一下。我有太多的CSS加载不必要的。 – Laura