CSS中水平居中设置的几种方式
1.行内元素：
如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。
<body>
<div class="txtCenter">我想要在父容器中水平居中显示。</div>
</body> <style>
.txtCenter{
text-align:center;
}
</style>
2.块状元素：
当被设置元素为 块状元素 时用 text-align：center 就不起作用了，这时也分两种情况：定宽块状元素和不定宽块状元素。
A.定宽块状元素
满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。（注意：元素的“上下 margin值” 是可以随意设置的。）
<body>
<div>我是定宽块状元素，哈哈，我要水平居中显示。</div>
</body> <style>
div{
border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/
width:200px;/*定宽*/
margin:20px auto;/* margin-left 与 margin-right 设置为 auto */
}
</style>
B.不定宽块状元素（不定宽块状元素：块状元素的宽度width不固定。）
1) 加入 table 标签
利用table标签的长度自适应性---即不定义其长度也不默认父元素body的长度（table其长度根据其内文本长度决定），因此可以看做一个定宽度块元素，然后再利用定宽度块状居中的margin的方法，使其水平居中。
第一步：为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td> )。
第二步：为这个 table 设置“左右 margin 居中”（这个和定宽块状元素的方法一样）。
举例如下：
<div>
<table>
<tbody>
<tr><td>
<ul>
<li>我是第一行文本</li>
<li>我是第二行文本</li>
<li>我是第三行文本</li>
</ul>
</td></tr>
</tbody>
</table>
</div> <style>table{
border:1px solid;
margin:0 auto;
}
2) 将块级元素的 display 转化为 inline 类型（设置为 行内元素 显示），然后使用 text-align:center 来实现居中效果。
<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</body> <style>
.container{
text-align:center;
}/* margin:0;padding:0（消除文本与div边框之间的间隙）*/
.container ul{
list-style:none;
margin:0;
padding:0;
display:inline;
}/* margin-right:8px（设置li文本之间的间隔）*/
.container li{
margin-right:8px;
display:inline;
}
</style>
3) 通过给父元素设置float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。
<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</body> <style>
.container{
float:left;
position:relative;
left:50%
} .container ul{
list-style:none;
margin:0;
padding:0; position:relative;
left:-50%;
}
.container li{float:left;display:inline;margin-right:8px;}
</style>
CSS中水平居中设置的几种方式的更多相关文章
- CSS中清除浮动的两种方式
在CSS中,父元素中的子元素如果使用了float,会导致父元素塌陷,高度为0. 对于这种情况,常见的解决方式有两种. 一.增加新的div,应用clear:both属性 html: <div cl ...
- CSS实现水平垂直居中的1010种方式
转载自:CSS实现水平垂直居中的1010种方式 划重点,这是一道面试必考题,很多面试官都喜欢问这个问题,我就被问过好几次了 要实现上图的效果看似很简单,实则暗藏玄机,本文总结了一下CSS实现水平垂直居 ...
- css中的浮动与三种清除浮动的方法
说到浮动之前,先说一下CSS中margin属性的两种特殊现象 1, 外边距的合并现象: 如果两个div上下排序,给上面一个div设置margin-bottom,给下面一个div设置margin-top ...
- javascript总结40:DOM中操作样式的两种方式
1 DOM中操作样式的两种方式 1 通过元素的style属性 注意: 通过style属性设置样式时,css中要写单位的属性,在js代码中也要加单位 //html <div id="bo ...
- CSS中隐藏内容的3种方法及属性值
CSS中隐藏内容的3种方法及属性值 (2011-02-11 13:33:59) 在制作网页时,隐藏内容也是一种比较常用的手法,它的作用一般有:隐藏文本/图片.隐藏链接.隐藏超出范围的内容.隐藏弹出 ...
- jQuery中开发插件的两种方式
jQuery中开发插件的两种方式(附Demo) 做web开发的基本上都会用到jQuery,jQuery插件开发两种方式:一种是类扩展的方式开发插件,jQuery添加新的全局函数(jQuery的全局函数 ...
- web.config文件中配置数据库连接的两种方式
web.config文件中配置数据库连接的两种方式 标签: 数据库webconfig 2015-04-28 18:18 31590人阅读 评论(1)收藏举报 分类: 数据库(74) 在网站开发 ...
- 基础篇：1.JavaScript运行在html中，引用有几种方式？—— 6.js中常用的输出方式？
书接上文,上文提到若干条JavaScript的基础性知识,大部分都是一些概念性的东西,本着认真严谨的态度,我们要认真对待,有些条目的问题是某个知识点的周边延伸,为节约篇幅,就一起整理了,如有描述不对的 ...
- CSS中隐藏内容的3种方法
CSS中隐藏内容的3种方法 一般有:隐藏文本/图片.隐藏链接.隐藏超出范围的内容.隐藏弹出层.隐藏滚动条.清除错位和浮动等. 1.使用display:none来隐藏所有内容 display:none可 ...
随机推荐
- 关于js中的原型
- c++友元函数、友元类、友成员函数
友元函数:不是类成员函数,是一个类外的函数,但是可以访问类所有成员. class Point{ public: friend void fun(Point t);//友元函数 private: int ...
- 【2017 ICPC亚洲区域赛北京站 J】Pangu and Stones（区间dp）
In Chinese mythology, Pangu is the first living being and the creator of the sky and the earth. He w ...
- jQuery实现全选、全不选以及反选操作
在写购物车案例时实现全选操作使用的是js的getAttribute()setAttribute()方法获取checked属性的值是undefined实现完成之后全选操作,如果在全选中的情况下改变其中一 ...
- Bootstrap04
Bootstrap04概述 一.输入框组 1.左侧添加文字 <div class="input-group"> <span class="input-g ...
- Linux基础入门---学习心得
之前一直以为Linux和Windows差不多,但是学习了Linux基础入门之后才发现两种操作系统之间差距非常大. Linux只是在硬件之上的内核和系统调用,就连我们在Windows里习以为常的图形界面 ...
- u-boot-1.1.6第1阶段分析之start.S、lowlevel_init.S文件
学习目标: 对start.S中每一行代码,都有基本了解 通过对start.S文件分析,对ARM920T架构的CPU的启动过程,有更清楚理解 U-boot属于两个阶段的Bootloader,第一阶段的文 ...
- python教程（八）·文件操作
由于离高考越来越近,博主打算本篇文章过后,暂停本系列教程的更新,等到高考完后再继续本系列教程,请谅解! 这次我们学习用python操作文件,包括文件的读.写等-- 操作文件第一步--打开文件 要想操作 ...
- java->php之在线子域名查询-接口光速版
因为不懂java,所以 用php重写了大佬的 在线子域名查询-接口光速版 http://sbd.ximcx.cn/ 这是大佬的 然后 改一下 ,用php 其实就是改了几行代码而已,jquery和aj ...
- FIR滤波器实例
Fs = 1000; % 采样频率 N = 1024; % 采样点数 ,即实际中一次FFT变换所使用的点数n = 0:N-1; % 采样序列,为plot绘图用的序列,其对应点表示的真实频率为 f = ...