panelGroup 内的 JSF 组件对齐

Question

我有一个 selectOneRadio 元素，在 dataTable 中带有 layout="custom"。下面是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 出现在底部。但我希望 看起来像中心 、w.r.t radioButton 如下所示 -

我尝试了下面的代码行，例如

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

但是其中 none 个产生了预期的结果。

那么怎么做呢？

Answer 1

给<h:panelGroup>这些样式

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

panelGroup 内的 JSF 组件对齐

JSF Components alignment inside panelGroup

css

jsf

datatable

selectoneradio

center-align