以前自认为对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>