在用UL-LI时，有适合需要将Li里面的内容居中显示；
方法有两种：
（推荐）1.设置LI的display为inline(规定应该从父元素继承 display 属性的值),为LI设置长度，设置text-align：center即可。核心就是把行级元素变化成块级元素。
2.padding或margin调节边框距离；
用这个方法让li中的内容居中很麻烦，需要不断的调试。padding数值需要随着LI的长度改变而改变，操作复杂，且不适用于LI中长短不一的情况；
3.position：relative，必须根据网页大小以及div大小来控制居中
4.float浮动居中（需要设置LI的总长度）；

LI居中的更多相关文章

  1. ul中li居中显示的table方法

    废话不多,贴代码 <ul> <li>1</li> <li>2</li> <li>3</li> <li>4 ...

  2. CSS中ul li居中的问题

    一直以为对ul li居中对齐已经掌握了.但最近做项目时发现之前li的float:left方法显然有一个问题,就是无法居中(水平),只能使用padding-left或margin-right的方法方法来 ...

  3. 使ul中的li居中

    1.如果li设置了float:left; 解决办法: 1.ul父元素的标签设置:text-align: center; 2.ul设置: display: inline-block; 2.li不设置fl ...

  4. 如何让多个li居中于ul中间

    设置ul的display:table,text-align:center. 注意:不可以设置ul的宽,不然无法实现.

  5. ul li 水平居中

    li的float:left方法显然有一个问题,就是无法居中(水平),只能使用padding-left或margin-right的方法方法来固定其居中.但这样可能在宽屏与窄屏的显示不一致.使用这种方法主 ...

  6. CSS实现居中的方式

    在介绍居中方式之前,简单介绍一下行内元素和块级元素. 行内元素 和其他元素都在同一行 高,行高及外边距和内边距部分可以改变 宽度只与内容有关 行内元素只能容纳文本或者其他行内元素 常用内联元素:a,i ...

  7. 如何使用CSS实现居中

    前言: 这一篇主要是翻译 <how-to-center-anything-with-css>这一篇文章的主要内容,再加上自己的一些概括理解:主要问题是解决垂直居中的问题.我们知道实现水平居 ...

  8. jquery左右链接类似frameset的插件

    一般在使用jquery的扩展的 ui方面的插件, 都要注意链接两个文件 一个是ui 相关的js文件 另一个是 ui相关的 css文件! 参考这个css布局 通常多个平行的items 都是用ul li来 ...

  9. Bootstrap学习 - 组件

    下拉菜单 注意:需要先引入jQuery.js再引入bootstrap.js(依赖前者) <div class="dropdown pull-right"> //默认就是 ...

随机推荐

  1. ceph_osd故障检测

    1.     当前monitor可以通过3种途径检测到osd离线 1)      Osd自主上报 2)      Osd通过投票的方式(满足一下条件之一,mon会将osd标记为down) a)     ...

  2. springboot集成巨杉数据库

    springboot倾向于约定优于配置,所以大大简化了搭建项目的流程,包括各种数据源的配置,接下来就和大家分享下最近用到的巨杉数据源连接池的配置 1.现在配置文件中定义巨杉连接池的各种连接信息,至于每 ...

  3. Ubuntu16.04LTS安装集成开发工具IDE: CodeBlocks 和Eclipse-cdt

    上文中,我们已经介绍了QT5.10.0在Ubuntu下的安装 https://www.cnblogs.com/si-lei/p/9240230.html, 接下来我们介绍CodeBlocks以及Ecl ...

  4. PowerShell 如何 远程连接【转】

    转自: 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://bobzy.blog.51cto.com/2109336/1181249 ...

  5. centos配置免密登录

    一.准备工作 1.先准备两台centos机器.例如:192.168.1.100和192.168.1.101两台机器,配置101免密登录100 2.默认centos会自带ssh和stfp,机器未安装,请 ...

  6. 单元测试 + UI测试

    一. 单元测试 简介: 单元测试, 又称模块测试, 是针对程序模块的最小单位来进行测试. 对于过程化变成来说, 一个单元就是单个函数 \ 过程等; 对于面向对象变成来说, 一个单元就是一个方法. 有了 ...

  7. springMVC下载功能

    前台页面 <a href="download">下载</a> 后台代码 /** * 文件下载 * @param request * @return * @t ...

  8. BZOJ - 2005 莫比乌斯水题

    \(gcd=k+1\)时,每一个的贡献都是\(2k+1\) \(gcd=1\)时,每一个贡献为\(1\) #include<iostream> #include<algorithm& ...

  9. HDU - 4763 找出特殊规律的串

    在一个Text串中找出Pattern串E以满足EAEBE,A B可以是任意串 看一眼觉得woc好难,后来看一下样例AB为空也可以 找观察一下E既是前缀也是后缀,很容易联想到next 最优情况EEE,那 ...

  10. gulp打包css/image/Less/Sass

    其他的和打包前一篇随笔(打包js) http://www.cnblogs.com/teersky/p/7251329.html 相同,本篇文章主要写gulpFile.js的配置: 安装CSS打包插件: ...