float:center实现居中浮动

最新推荐文章于 2021-11-04 19:45:00 发布

原创最新推荐文章于 2021-11-04 19:45:00 发布 · 418 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #浏览器 #XHTML #Web #HTML

html css 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一种不使用CSS hacks的跨浏览器兼容方法来实现元素的居中浮动布局。通过相对定位和左右偏移的方式，使列表项能够相对于父容器居中显示，并保持良好的浏览器兼容性。

部署运行你感兴趣的模型镜像

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="zh-cn" lang="zh-cn" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="麦鸡(MacJi)的博客，关注Web内容、结构与表现。" name="description" />
<meta content="Copyright (c) 2008 MacJi" name="copyright" />
<meta content="麦鸡,MacJi" name="author" />
<meta content="web前端开发,麦鸡,MacJi,Blog,博客" name="keywords" />
<title>跨浏览器实现float:center，No CSS hacks</title>
<style>
ul,li{
margin:0;
padding:0;
list-style:none;
}

#macji .macji-skin{
float:left;
position:relative;
left:50%;
}
#macji .macji-skin li{
margin:10px;
padding:0 10px;
float:left;
position:relative;
right:50%;
}
</style>
</head>
<body>
<h1>跨浏览器实现float:center，No CSS hacks</h1>
<div id="macji">
<ul class="macji-skin">
<li>列表一,我是浮动的</li>
<li>列表二</li>
<li>列表三</li>
<li>这里可能是N</li>
</ul>
</div>
</body>
</html>