I have a selectOneRadio element with layout="custom" inside a dataTable. Below is the xhtml code-
<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>
So this is how it appears in browser-
As we can see, the outputLabel appears to the bottom with respect to radioButton. But i want that to look centre, w.r.t radioButton as shown below -
I tried below lines of code like
style="display:block; text-align:center" OR
style="margin: 0 auto;"
But none of them produces the desired result.
So How to do it?
UPDATE
I included changes suggested by @Pavel Schiller-
.panelGCus{
display: flex;
align-items: center;
}
<h:panelGroup styleClass="panelGCus">
This is how it looks now-
Any idea how to keep the margin between radioButton & outputLabel?