设为首页收藏本站
充值积分切换到窄版

宝葫芦源码

 找回密码
 立即注册

QQ登录

只需一步，快速开始

搜索
热搜: 活动 交友 discuz
宝葫芦源码»首页 › 建站资讯 › 网站建设杂谈 › DIV里面的li 水平居中代码分享
返回列表 发新帖
查看: 1149|回复: 0

DIV里面的li 水平居中代码分享

[复制链接]
admin

99

主题

101

帖子

692

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
692
发表于 2022-9-15 20:29:59 | 显示全部楼层 |阅读模式
网站制作中，我们在制作导航的时候，经常会遇到 多个并排LI需要页面居中显示，效果入下图
QQ截图20220915202623.jpg
这个时候text-align:center是无效的
下面列数实际可以用的代码：
  1. <style>
  2. .box
  3. {
  4.     width:90%;
  5.     margin:auto;
  6. }
  7. .box ul
  8. {
  9.     display:table;  /**不要设置宽度*/
  10.     margin:10px auto;
  11. }
  12. .box ul li
  13. {
  14.     border:1px solid #06C;
  15.     text-align:center;
  16.     float:left;
  17.     *float:none;
  18.     *display:inline;
  19.     *zoom:1; list-style: none;
  20.         padding:10px;
  21.         margin:10px;
  22.         width:10%;
  23.         background:#06C;
  24. }
  25. .box ul li a{ color:#fff}
  26. </style>
复制代码
以上就是宝葫芦整理的div中li水平居中代码，拿去不谢！！！！
li居中
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|宝葫芦源码 ( 苏ICP备16043844号-1 )

GMT+8, 2024-12-22 13:22 , Processed in 0.093708 second(s), 24 queries .

Powered by 宝葫芦源码 X3.4

Copyright © 2001-2021, 宝葫芦源码.

快速回复 返回顶部 返回列表