仅使用40%的宽度时，如何在HTML中居中显示列

我有一些编码经验，但建立一个网站对我来说是新的。到目前为止，我已经能够在谷歌上搜索到我所需要的大部分内容，但这次我遇到了一些我似乎找不到答案的问题

我有一个HTML页面，上面有一个类：

<style type="text/css">
        .size1of5 {
            float: left;
            width: 20%;
        }
    </style>

.尺寸1/5{
浮动：左；
宽度：20%；
}

该类用于显示此数据列表中的数据：

<asp:ScriptManager ID="ScriptManager2" runat="server" />
            <div>
                <asp:Timer ID="TimerDelay" OnTick="TimerDelay_Tick" runat="server" Interval="10000">
                </asp:Timer>
            </div>
            <div>
                <asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" runat="server">
                    <Triggers>
                        <asp:AsyncPostBackTrigger ControlID="TimerDelay" EventName="Tick" />
                    </Triggers>
                    <ContentTemplate>
                        <asp:DataList ID="DataList1" runat="server" RepeatColumns="5" CellSpacing="3" Width="100%">
                            <ItemStyle HorizontalAlign="Center"></ItemStyle>
                            <ItemTemplate>
                                <div class="size1of5">
                                    <table>
                                        <tr>
                                            <td>
                                                roundimage
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                label
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                label
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                                <div style="clear: both;"></div>
                            </ItemTemplate>
                        </asp:DataList>
                    </ContentTemplate>
                </asp:UpdatePanel>
            </div>

圆形图像
标签
标签

出于测试目的，数据生成7列，每10秒，页面会转到第1页或第2页。第1页有5列，第2页只有2列

我试图做到的是，当显示的列少于5列时，将列居中。我尝试过用谷歌搜索一种方法来实现这一点，也尝试过各种较小的方法，但都没有效果。如果要显示的列少于5个，是否可以将列居中

---

我感谢您提供的任何帮助，因为我对图形设计不太感兴趣。

理解容器和UI的流程有点困难，但根据我的理解，是的，您可以将项目集中在

中。这里有一个快速的建议

在

上添加一个

容器类（根据本例，可以是CSS中引用的任何类），然后按照模板中嵌套项的模式进行操作

.container {
  display: flex;
  justify-content: center; // this will center flex items
  flex-wrap: wrap;
}
.size1of5 {
  width: 20%;
  max-width: 20%;
  box-sizing: border-box; // optional, use case would so a border doesn't force a pre-mature wrap
}
.集装箱{
显示器：flex；
调整内容：居中；//这将居中调整项目
柔性包装：包装；
}
.尺寸1/5{
宽度：20%；
最大宽度：20%；
框大小：border-box；//可选，用例将使边框不强制进行预包装
}
这并不是所有用例的反映，但应该让您开始。根据您的受众，您可能希望为flexbox属性使用供应商前缀。
这是一个很好的建议，但当我尝试查看页面时，会收到一条错误消息，说ItemTemplate没有“class”属性。我想我已经尝试过类似的方法，但是我会看看把类放在其他地方是否可以做到。但是，把类放在数据列表项上就成功了，所以谢谢你的帮助。