css - 如何在 panelGrid 中对齐 outputLabel 和 selectOneMenu

Question

我需要使用 p:outputLabel 和 p:selectOneMenu 进行简单对齐，就像这个基本的 example

但是，当我使用 p:inputText 时它才起作用。

我需要这样的东西:

<p:panelGrid columns="2">

    <h:outputLabel for="idName" value="* #{msg.select_name}: " required="true" />
    <p:selectOneMenu id="idSName" value="#{manage.name}">  
            <f:selectItems value="#{manage.listNames}"  />
    </p:selectOneMenu> 

    <h:outputLabel for="idCountry" value="#{msg.select_country}: " required="true" />
    <p:selectOneMenu id="idCountryCustomer" value="#{manage.countrySelected}">  
                    <f:selectItems value="#{manage.listCountryCustomer}"  />  
    </p:selectOneMenu>

</p:panelGrid>

Answer 1

在 p:selectOneMenu 上，您应该应用 vertical-align:middle:

<p:selectOneMenu id="idSName" value="#{manage.name}" style="vertical-align:middle;">  
        <f:selectItems value="#{manage.listNames}"  />
</p:selectOneMenu>