I am facing an issue where I want to center the divs in a panel. Each div is generated within a for-each-loop inside the panel. However, the problem arises when they are displayed as block elements: https://i.sstatic.net/RvnlX.jpg
When I try floating them left, they end up looking like this:
https://i.sstatic.net/PCImT.jpg
As you can see from the images, the elements are no longer contained within the panel when floated left. I'm attempting to have them appear centered and then shift to the left as the next element appears, like a combination of these two pictures. I've tried numerous approaches with CSS, but haven't been able to achieve the desired effect. The final version should resemble this layout:
https://i.sstatic.net/ib9j1.jpg
Any assistance would be greatly appreciated.
<p:panel header="DMS Folder" toggleable="true" toggleSpeed="500"
style="margin-top:1%;padding-left:5%;padding-right:5%;margin-bottom:2%;"
collapsed="false" styleClass="noBorder">
<ui:repeat var="file" value="#{dms.files}">
<p:outputPanel
style="float:left;text-align:center;margin-right:30px;margin-bottom:2%;">
<p:graphicImage id="mimeType" value="#{file.file}"
title="#{file.fileEnd}" />
<br />
<p:outputLabel value="#{file.fileName}" style="font-size:10pt;" />
</p:outputPanel>
</ui:repeat>
</p:panel>