css - panelGroup 内的 JSF 组件对齐

Question

我在dataTable中有一个带有layout="custom"的selectOneRadio元素。下面是xhtml代码-

<p:dataTable var="varlist" value="#{testbean.testlist}">
    <p:column headerText="Choose Option" width="120">
        <p:selectOneRadio id="customRadio" value="#{varlist.varlistValue}"
            layout="custom" required="true">
            <f:selectItem itemValue="10" />
            <f:selectItem itemValue="20" />
        </p:selectOneRadio>

        <h:panelGrid columns="1">
            <h:panelGroup>
                <p:radioButton id="opt1" for="customRadio" itemIndex="0" />
                <h:outputLabel for="opt1" value="OPTION 1" styleClass="radiolabelOption"/>
            </h:panelGroup>

            <h:panelGroup>
                <p:radioButton id="opt2" for="customRadio" itemIndex="1" />
                <h:outputLabel for="opt2" value="OPTION 2" styleClass="radiolabelOption"/>
            </h:panelGroup>
        </h:panelGrid>
    </p:column>
</p:dataTable>

<style type="text/css">
    .radiolabelOption {
      margin-left: 10px;
    }
</style>

所以这就是它在浏览器中的显示方式-

正如我们所见，outputLabel相对于 radioButton 显示在底部。但我希望它看起来居中，如下所示 -

我尝试了下面的代码行

style="display:block; text-align:center" OR
style="margin: 0 auto;"

但它们都没有产生预期的结果。

那么该怎么做呢？

Answer 1

给<h:panelGroup>这些风格

.panelGroup{
  display: flex;
  align-items: center;
}