CSS水平居中
一、使用CSS水平居中的三种情况 。
1、行内元素（文本、图片等）；
2、定宽块状元素 ；
3、不定宽块状元素（3种方法）；
二、具体解决方法。
1、行内元素（文本、图片等）：
给父元素设置 text-align：center;
2、定宽块状元素 ：
<style>
div{
border:1px solid blue;
width:350px;
height:20px;
margin:20px auto; /*水平居中：上下方向有20px的margin值，左右方向的等margin值由浏览器自动设置*/
}
</style>
<body>
<div>这是个定宽块状元素，居中显示</div>
</body>
3、不定宽块状元素（3种方法）：
（1）为需要水平居中的元素加table标签；然后为table设置样式： table{margin:0 auto;}
（2）将块级元素转换为内联元素（eg：div{display：inline；}）；然后使用text-align:center;来实现居中
<style>
.container{text-align:center;}
.container ul{
list-style:none;
margin:0;
padding:0;
display:inline;
}
.container li{
margin-right:8px;
display:inline;
}
</style>
<body>
<div class="container">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</body>
（3）给父元素设置float:left; position:relative; left:50%;
子元素设置position:relative; left:-50% 来实现水平居中
<style>
.container{
float:left;
position:relative;
left:50%;
}
.container ul{
list-style:none;
margin:0;
padding:0;
position:relative;
left:-50%;
}
.container li{
display:inline;
float:left; /*有无都可*/
}
</style>
<body>
<div class="container">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</body>
CSS水平居中的更多相关文章
- css水平居中那点事
昨晚深夜写了css垂直居中那点事,今晚该写他的兄弟篇:css水平居中那点事了..…^^ 其实本来这两个可以连在一起写,可是为了不要搞混,为了让思路更清晰,最后决定还是分开来些比较好...这样以后也有利 ...
- css水平居中，竖直居中技巧（二）
css水平居中,竖直居中技巧(二)===### 1.效果 ### 2.代码#### 2.1.index.html <!DOCTYPE html> <html lang="z ...
- css水平居中，竖直居中技巧（一）
css水平居中,竖直居中技巧(一)===### 1.效果 ### 2.代码#### 2.1.index.html <!DOCTYPE html> <html lang="z ...
- css水平居中的各种方法
说到水平居中,大家可能觉得很简单啊,text-align:center 就OK了. 但是,有时候会发现这样写了也没出效果.原因是什么呢? 请往下看. 水平居中:分为块级元素居中和行元素居中 行内元素 ...
- CSS水平居中/垂直居中的N个方法
我看最近微博流行CSS居中技术,老外码农争相写相关的文章,一篇赛一篇的长啊,我把几篇归纳总结了一下,算是笔记. 孔乙己曾说:"茴香豆的回字有四种写法",万一哪天有个面试官问你:&q ...
- CSS水平居中和垂直居中解决方案
一.CSS 居中 — 水平居中 DIV等标签本身没有定义自己居中的属性,网上很多的方法都是介绍用上级的text-align: center,然后嵌套一层DIV来解决问题. 可是这个方法有时候完全不起作 ...
- CSS 水平居中
一.水平居中:行内元素解决方案 居中元素:文字.链接以及其它行内元素(inline或inline-*类型的元素,如inline-block,inline-table,inline-flex)解决方案: ...
- CSS 水平居中/布局 垂直居中 （月经问题）
水平居中 如果它是一个行内元素 对其父元素使用 text-align:center 即可实现. <p style = " text-align:center; width:300px; ...
- CSS 水平居中与垂直居中
前言 在CSS布局中,水平居中与垂直居中一直是用到比较多的,在本篇中将介绍水平居中.垂直居中的几种方式. 示例 HTML: <div class="parent"> & ...
随机推荐
- 每天一个linux命令---mount
查询挂载服务的信息,使用挂载mount命令: [wapmail@app2linux04 monitor]$ mount |grep 172.16.182.146 type nfs (ro,udp,no ...
- data.table包
data.table 1.生成一个data.table对象 生成一个data.table对象,记为DT. library(data.table) :],V3=round(rnorm(),),V4=:) ...
- ACM Greedy Mouse
Greedy Mouse 时间限制:1000 ms | 内存限制:65535 KB 难度:3 描述 A fat mouse prepared M pounds of cat food,read ...
- 移动开发流量省起来之Zepto
一张图说明Zepto.js的优势: jquery 1.x最新版284KB,压缩后94KB:jquery2.x最新版247KB,压缩后84KB:Zepto最新版54KB,压缩后9KB!!! 然后 ...
- js 性能基准测试工具-告别可能、也许、大概这样更快更省
平时写js经常遇到这样做是不是更快点?但又没有具体简单可测试的工具,最近也倒序看博客园司徒正美 js分类下的文章 [ps:去年灵光一闪,发现看博客园排名前100的博客.按照文章分类倒序看是学习最快的方 ...
- ［转载］TableView详解
一.建立 UITableView DataTable = [[UITableView alloc] initWithFrame:CGRectMake(0, 0, 320, 420)]; [Data ...
- 项目管理gitflow的用法(转)
在这里主要讲一下我在项目中用到的关于gitflow的用法. 公司的项目中,专门有一台用来存放版本库的服务器,路径是在默认的安装目录/opt/git/,那么在使用的时候,如果你是一个功能模块或者是一 ...
- Node.js 手册查询-2-MongoDB数据库方法
MongoDb 标签(空格分隔): 数据库 MongoDb 安装 当前版本 2.X 解压至任意目录,最好不要是c盘. 在根目录下建立一个文件夹用来存储工程 我的例子: 安装至: d:\mongodb ...
- Nodejs中cluster模块的多进程共享数据问题
Nodejs中cluster模块的多进程共享数据问题 前述 nodejs在v0.6.x之后增加了一个模块cluster用于实现多进程,利用child_process模块来创建和管理进程,增加程序在多核 ...
- PHP的学习--cookie和session--来自copy_02
PHP的学习--cookie和session 最近读了一点<PHP核心技术与最佳实践>,看了cookie和session,有所收获,结合之前的认识参考了几篇博客,总结一下-- 1. P ...