以前自认为对div ul li居中对齐已经掌握了。但最近做项目时发现之前div ul li的float:left方法显然有一个问题，就是无法居中（水平），只能使用padding-left或margin-right的方法方法来固定其居中。但这样可能在宽屏与窄屏的显示不一致。

使用这种方法主要是利用li的浮动固定宽度来实现，li的默认display为block，将其这个属性改为inline便可实现这种ul li居中的问题。

<%@ Page Title="" Language="C#" MasterPageFile="~/Main_MasterPage.master" AutoEventWireup="true" CodeFile="Qualification.aspx.cs" Inherits="Qualification" %>
<%@ Register src="~/UserControls/MyDataPager.ascx" tagname="MyDataPager" tagprefix="uc1" %>

<asp:Content ID="Content1" ContentPlaceHolderID="cph_Head" Runat="Server">
    <title>资质证书信息列表</title>
    <style type="text/css">
        #quali {
            text-align:center;
        }
        #quali ul {
            margin:10px 0;
            overflow:hidden;
        }
        #quali ul li {
           display:inline; margin-right:30px;
        }
    </style>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="cphMain" Runat="Server">
    <div id="quali">
        <ul>
            <li>
                <asp:Image ID="Image1" runat="server" ImageUrl="~/images/credentials/1.png" />
            </li>
            <li>
                <asp:Image ID="Image2" runat="server" ImageUrl="~/images/credentials/2.png" />
            </li>
        </ul>
        <ul>
            <li>
                <asp:Image ID="Image3" runat="server" ImageUrl="~/images/credentials/3.png" />
            </li>
        </ul>
        <ul>
            <li>
                <asp:Image ID="Image4" runat="server" ImageUrl="~/images/credentials/4.png" />
            </li>
        </ul>
        <ul>
            <li>
                <asp:Image ID="Image5" runat="server" ImageUrl="~/images/credentials/5.png" />
            </li>
        </ul>
    </div>
   
    <script type="text/javascript" language="javascript">
        window.load = initPage();
        function initPage() {
            var obj = document.getElementById("menu_li4");
            obj.className = "currentMenu";
        }
    </script>
</asp:Content>