Question

我想将div放在面板中。每个div都在面板内的for-each-loop中创建。问题是它们被显示：块：

或者当我浮动时：左：它们看起来像这样：

当我浮动时，你可以看到元素不在面板中：left; 我试图让它们看起来居中并在下一个元素即将到来时向左移动，这两个图片的组合。我尝试了很多东西，但我无法获得正确的CSS。最终版本应如下所示：

希望你们能帮帮我。

<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>

Answer 1

您应该在面板周围添加一个容器，它应该有text-align: center;。或者实际上，如果你可以将它添加到<p:panel>，我对此并不熟悉，也不知道它会呈现什么元素。

您应该从div中删除float: left;，而是添加display: inline-block;。

Here is an example

代码应该如下所示

<div style="text-align: center;">
    <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="display: inline-block;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>
</div>

Answer 2

你应该尝试使用'margin：auto'设置居中和'display：flex'进行项目定位

http://jsbin.com/niroju/1/edit?html,css,console,output

<html>

<head>
  <meta charset="utf-8">
</head>
<style>
  .center {
    margin: auto;
    display: flex;
  }
  .item {
    margin: 2px;
  }
</style>

<body>

  <div class="center" style="background-color:red;">
    <ui style="background-color:green; margin: auto;">
      <span class="item">item</span>
      <span class="item">item</span>
      <span class="item">item</span>
      <span class="item">item</span>
    </ui>
  </div>
</body>

</html>

CSS中心div for for循环

2 个答案: