如何让float中left的对象居中-创新互联

本篇文章给大家分享的是有关如何让float:left的对象居中，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

创新互联坚持“要么做到，要么别承诺”的工作理念，服务领域包括：成都网站制作、做网站、外贸营销网站建设、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的秀峰网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！

我们在做导航（nav）时，通常会用到float：left;但是这样做的话，让导航文本水平居中确实个麻烦事；
分析如下：
[float:left]有个伟大之处，它使div（或者其他标签）的宽度自适应其内容，但它却有个弊端：无法居中。
[display:inline-block]也有同样的特性，并且可以居中，但连续几个这样的东东，之间却会出现空格。
为了解决这个问题，我们可以把二者结合起来使用：
[参与测试的浏览器：IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2 ]
[操作系统：Windows]

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/tupian/20230522/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>inline-block解决float:left对象无法居中的问题。</title> 
<style type="text/css"> 
* { margin:0; padding:0; list-style:none;} 
body { text-align:center;} 
li { float:left; font-size:12px;} 
a { float:left; border:1px solid #000; padding:5px 10px; text-decoration:none; color:#000;} 
ul { display:inline-block; *display:inline; zoom:1;} 
</style> 
</head> 
<body> 
<ul> 
<li><a href="#nogo">首页</a></li> 
<li><a href="#nogo">关于</a></li> 
<li><a href="#nogo">产品</a></li> 
<li><a href="#nogo">联系我们</a></li> 
<li><a href="#nogo">留言</a></li> 
</ul> 
</body> 
</html>

以上就是如何让float:left的对象居中，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。

分享题目：如何让float中left的对象居中-创新互联
网站URL：https://www.cdcxhl.com/article38/ddjgsp.html

成都网站建设公司_创新互联，为您提供全网营销推广、虚拟主机、关键词优化、网站收录、响应式网站、手机网站建设

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容