inline-block实现元素水平居中

来源：互联网发布：数控铣床编程基础知识编辑：程序博客网时间：2024/06/06 07:05

仅inline-block属性是无法让元素水平居中，他的关键之处要在元素的父容器中设置text-align的属性为“center”，

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title><style type="text/css">*{  margin: 0;  padding: 0;}ul {  list-style: none outside none;  padding: 10px;  background: green;  text-align: center;}ul li {  display: inline-block;  *display: inline;  zoom: 1;  background: orange;  padding: 5px;}</style></head><body><ul>    <li>item1</li>    <li>item2</li>    <li>item3</li>    <li>item4</li>    <li>item5</li></ul></body></html>

上面的demo效果，明显的可以看出，在inline-block的元素之间存在“4px”的空白，如何解决呢？

把<li>放在一行中。

<ul>    <li>item1</li><li>item2</li><li>item3</li><li>item4</li><li>item5</li></ul>

2、全兼容的样式解决方法
经过高人指点，使用纯CSS还是找到了兼容的方法，就是在父元素中设置font-size:0,用来兼容chrome，而使用letter-space:-N px来兼容safari。

.finally-solve {  letter-spacing: -4px;/*根据不同字体字号或许需要做一定的调整*/  word-spacing: -4px;  font-size: 0;}.finally-solve li {  font-size: 16px;  letter-spacing: normal;  word-spacing: normal;  display:inline-block;  *display: inline;  zoom:1;}

0 0