如何在Primefaces中垂直对齐inputText和commandButton [重复]答案

【问题标题】：How to vertical align an inputText and a commandButton in Primefaces [duplicate]如何在Primefaces中垂直对齐inputText和commandButton [重复]
【发布时间】：2015-12-19 01:21:34
【问题描述】：

我的代码：

<h:form>
    <h:panelGrid  columns="3">
        <p:inputText id="tweet" binding="#{input1}" label="tweet"  styleClass="selectMenu"/>
        <p:watermark for="tweet" value="Write a tweet here" />
        <p:commandButton style="vertical-align: middle;" value="Submit" action="#{testPageSentimentBean.navigate(input1.value)}"></p:commandButton>
    </h:panelGrid>
</h:form>

呈现如下：

注意：水印不显示，但这是题外话

如何垂直对齐 inputText 和 commandButton？

【问题讨论】：

复制粘贴你的代码，一切都对齐了，水印也能正常工作。也许这门课selectMenu 打破了你的风格或一些外在的风格？您可以在浏览器控制台 (F12) 中检查您的组件是否有其他类并更改其属性以查看是什么破坏了事情。
这不是真正的 JSF 问题。我建议多练习基本的 HTML 和 CSS。 htmldog.com 有非常好的教程。

标签： css jsf primefaces

【解决方案1】：

使用列类

XHTML：

 <h:panelGrid  columns="3" columnClasses="layoutColumn1,layoutColumn2,layoutColumn3">

css：

.layoutColumn1 {
   vertical-align: top;
}
.layoutColumn2 {
   vertical-align: top;
}
.layoutColumn3 {
   vertical-align: top;
}

【讨论】：

尝试找到这个的副本。有并标记为这样