inline-block元素水平居中问题
今天做项目的时候碰到了不固定元素个数，需要水平居中的问题，原来的确定宽度下margin:0 auto等方法木有用了。想起来之前看过display：inline-block的文章，
果断用这个。
之前很少用这个属性。。印象里麻烦比较多。。好了不多说了，上代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>center</title>
<style>
.content-wrapper{
text-align: center;
} .content-wrapper ul li{
display: inline-block;
border: 1px black solid;
} </style>
</head>
<body>
<div class="content-wrapper">
<ul>
<li>hello kitty</li>
<li>hello kitty</li>
<li>hello kitty</li>
</ul>
</div>
</body>
</html>
打开页面，乍一看居中了！！
等等，好像有点奇怪，出现了空白
一般这个奇奇怪怪的空白都是文本节点元素惹的祸。。换行符哟，不信你把li都弄一行里。。
好，解决方法就是在wrapper中定义font-size:0;对于里面需要定义字体大小的元素再挨个手动定义一遍。。。
然后为了兼容ie6/7需要做点hack处理。。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>center</title>
<style>
.content-wrapper{
text-align: center;
font-size: 0;
} .content-wrapper ul li{
display: inline-block;
*display: inline;
*zoom:1;
border: 1px black solid;
font-size: 16px;
} </style>
</head>
<body>
<div class="content-wrapper">
<ul>
<li>hello kitty</li>
<li>hello kitty</li>
<li>hello kitty</li>
</ul>
</div>
</body>
</html>
好了，完成了！li元素可以用后端代码进行迭代生成了~
inline-block元素水平居中问题的更多相关文章
- CSS3如何去除 inline block 元素之间多出的空格
display: inline-block 属性很好的避免了元素的浮动问题,但是会有点小问题,就是 inline-block 元素间的回车会被显示为一个空格.然而,我们写代码时,都是用回车来格式化的. ...
- 多个inline元素、block元素、inline-block元素在父容器中的换行情况
1.首先看inine元素的换行情况 <style> *{padding:0;margin:0} div.wrap{width:200px;height:200px;border:1px s ...
- 当inline元素包裹block元素时会发生什么
经常有图片链接写法如下: <a href="www.baidu.com"><img src="baidu.jpg" /></a&g ...
- inline元素、block元素、inline-block元素
inline 内联元素:是不可以控制宽和高.margin等:并且在同一行显示,不换行,直到该行排满. block 块级元素:是可以控制宽和高.margin等,并且会换行.块级对象元素会单独占一行显示, ...
- block元素和inline元素的特点
一.block元素的特点 1.处于常规流中时,如果width没有设置,会自动填充满父容器 2.可以设置height/width及margin/padding 3.处于常规流中时,布局在前后元素位置之间 ...
- 关于block元素和inline元素
呃...这个会不会太基础了.最近在复习,所以基础知识也不能够忽略. 根据HTML 4.01 规范,其描述如下(http://www.w3.org/TR/html401/struct/global.ht ...
- inline元素、block元素
inline元素 不会独占一行,相邻的行内元素会排列在同一行内,直到一行排不下才会换行 高.行高.以及外边距和内边距不可改变 宽度就是它的文字或图片的宽度,不可改变,随元素内容变化而变化 内联元素只能 ...
- css确定元素水平居中和垂直居中
---恢复内容开始--- 首先,我们在了解如何通过css了解元素水平和垂直居中之前,先要了解下html都有哪些元素,这些元素与偶有哪些分类,因为不同类别的元素的水平垂直居中方法是完全不同的,究其根本当 ...
- css点滴2—六种方式实现元素水平居中
本文参考文章<六种方式实现元素水平居中> 元素水平居中的方法,最常见的莫过于给元素一个显式的宽度,然后加上margin的左右值为auto.这种方式给固定宽度的元素设置居中是最方便不过的.但 ...
- 【css系列】六种实现元素水平居中方法
一.前言 居中效果在CSS中很是普通的效果,平时大家所看到的居中效果主要分为三大类:水平居中.垂直居中和水平垂直居中.而其中水平居中相对于后两者来说要简单得多.使用了css3的flexbox的属性轻松 ...
随机推荐
- 作为iOS程序员，最核心的60%能力有哪些？
作为iOS程序员,最核心的60%能力有哪些? 一个合格的iOS程序员需要掌握多少核心技能?你和专业的开发工程师的差距有多大?你现在的水平能开发一个功能完整性能高效的iOS APP吗?一起来看看下面 ...
- Redis+EJB实现缓存（一）
上篇博客大概的对Redis做了一个主要的了解.由于刚刚接触自己也不太明确.所以上篇博客写的乱七八糟的.这篇由于项目须要,学习了一下Redis和EJB集成. 如今脑子相对照较清晰了一些. 实现思 ...
- WPF新手之如何将数据绑定到TreeView
看过许多例子,全是绑定到类的,没人说如何绑定到某个对象,偏偏我这个绝对的新手就是要绑定到一个对象,只能自己摸索了: 首先要将数据绑定到容器,有以下几个默认条件:①元数据必须包装在List或者Obser ...
- Apache Flink 1.5.1 Released
Apache Flink: Apache Flink 1.5.1 Released http://flink.apache.org/news/2018/07/12/release-1.5.1.html ...
- JasperReport 中文问题解决
1 运行环境 1.1 JasperReport 3.5 JasperReports 是iReport的核心内容.它是一个强有力的开源报表产生工具,可以将内容输出到屏幕上.打印机或生成PDF ...
- 用Qt编写的计算文件MD5值的Demo
Dialog.ui <?xml version="1.0" encoding="UTF-8"?> <ui version="4.0& ...
- IO、FileInputStream、(二十)
1.IO流概述及其分类 * 1.概念(什么是IO?) * IO流用来处理设备之间的数据传输 * Java对数据的操作是通过流的方式 * Java用于操作流的类都在IO包中 * 流按流向分为两种:输入流 ...
- 自定义android 音乐通知栏 ——可伸缩扩展
Android custom notification for music player Example In this tutorial, you will learn how to creat ...
- position属性中的绝对定位和相对定位
absolute(绝对定位):1.如果没有父级DIV,则会根据浏览器原始点去定位,而且跟他相邻的DIV会忽略它,定位后则可用TRBL(top,right,bottom,left)去布局.注意:TRBL ...
- [Selenium] 如何使用Chrome Options 定制测试Chrome 浏览器的特定属性 (类似FirefoxProfiles)
Chrome Options 类似于FirefoxProfiles,用于定制待测试的Chrome 浏览器的特定属性 1)如果希望测试某个浏览器插件,可通过addExtensions方式提前加载以.cr ...