在primefaces和css中垂直对齐元素并做出响应[重复]答案

【问题标题】：Align elements vertically and responsive in primefaces and css [duplicate]在primefaces和css中垂直对齐元素并做出响应[重复]
【发布时间】：2018-09-11 07:41:21
【问题描述】：

我需要在输出面板中垂直对齐 2 个元素。我是用 margin-top: 3em 做的，但你可以看到这种方式没有响应：

在电影视图中：

我需要在所有设备中将右键与文本垂直对齐。

我使用这个代码：

<p:outputPanel class="ui-g">

                <p:outputPanel class="ui-g-8">
                    <h:outputText value="My text will be here" styleClass="enunciadoProtocolo" /><br />
                    <h:outputText value="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." 
                                  styleClass="subEnunciadoProtocolo" />
                </p:outputPanel>
                <p:outputPanel class="ui-g-4" style="text-align: center; margin-top: 3em;">
                    <p:commandButton update="mensajes" icon="fa fa-file-text" value="Ver pdf" />
                </p:outputPanel>

【问题讨论】：

用div's 替换p:outputPanels 是否有效？
然后查看生成的客户端 html 并检查是否有什么东西阻止了它。
如果您需要文本下方的按钮，请阅读我的答案。如果你想让它在文本旁边但在较低或较高的位置，那么我的回答是错误的。请评论
@Kukeltje 我需要文本旁边的按钮，正好在中间
好的，但这与响应能力有什么关系？这是一个“简单”的“垂直对齐”stackoverflow.com/questions/79461/…

标签： html css primefaces styles xhtml

【解决方案1】：

如果按钮的高度是固定的，你可以简单地使用它

position:relative;top:50%;margin-top:按钮高度的一半;

&lt;p:outputPanel class="ui-g-4" style="position:relative; top:50%; margin-top:-half of button height;"&gt;

【讨论】：

为什么会有帮助？需要详细说明吗？
但问题是所有元素都应该是响应式的，所以页面中的任何元素都没有固定高度
按钮通常是，如果您不想以这种方式使用，您可以删除margin-top并添加transform：translateY（-50％）;它会响应
@RenatoHoxha 是对的，按钮通常是固定的（您在“小屏幕”上的按钮看起来并不“漂亮”......）。您可以解决此问题，例如通过在较小的屏幕上使用时减小字体大小等...完整（=良好）的响应能力也需要您的工作。该框架不能（也不应该）解决您拥有的每个响应式需求。他的回答也是我提到的副本中的“第三个”要点。
我个人不想通过在文本旁边设置“pdf”版本的按钮和大量未使用的空白来“浪费”手机上的屏幕空间。也许你最好让它“浮动在上面”或在文本之后/下面”。那么我删除的答案可能会有所帮助。