一、使用CSS水平居中的三种情况 。
1、行内元素(文本、图片等)；
2、定宽块状元素 ；
3、不定宽块状元素(3种方法)；
二、具体解决方法。
1、行内元素(文本、图片等)：
给父元素设置 text-align：center;
2、定宽块状元素 ：
div{
border:1px solid blue;
width:350px;
height:20px;
margin:20px auto; /*水平居中：上下方向有20px的margin值，左右方向的等margin值由浏览器自动设置*/
}
3、不定宽块状元素(3种方法)：
(1)为需要水平居中的元素加table标签；然后为table设置样式： table{margin:0 auto;}
(2)将块级元素转换为内联元素(eg：div{display：inline；})；然后使用text-align:center;来实现居中
.container{text-align:center;}
.container ul{
list-style:none;
margin:0;
padding:0;
display:inline;
}
.container li{
margin-right:8px;
display:inline;
}
- 1
- 2
- 3
(3)给父元素设置float:left; position:relative; left:50%;
子元素设置position:relative; left:-50% 来实现水平居中
.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; /*有无都可*/
}
- 1
- 2
- 3
css水平居中那点事
昨晚深夜写了css垂直居中那点事,今晚该写他的兄弟篇:css水平居中那点事了..…^^ 其实本来这两个可以连在一起写,可是为了不要搞混,为了让思路更清晰,最后决定还是分开来些比较好…这样以后也有利 …
css水平居中，竖直居中技巧(二)
css水平居中,竖直居中技巧(二)=== 1.效果 2.代码# 2.1.index.html
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 即可实现.
& …
随机推荐
总结Cnblogs支持的常用Markdown语法
一.什么是Markdown Markdown是一种可以使用普通文本编辑器编写的标记语言, Markdown的语法简洁明了.学习容易,而且功能比纯文本更强,因此有很多人用它写博客.世界上最流行的博客平台 …
remove —会报错discard不会报错
s = {1,2,3,4,5,6,’sn’,’7′} s.remove(‘hellfjsdjfsjdfljsdl’)#删除元素不纯在会报错 print(s) s.discard(“sbbbb …
调整 FMX Android 文字显示「锯齿」效果
说明:调整 Firemonkey Android 显示文字有「锯齿」效果 适用:Firemonkey Android 平台 修改方法: 请将源码 FMX.FontGlyphs.Android.pas …
[算法导论]迪克斯特拉算法 @ Python
class Graph: def __init__(self): self.V = [] self.w = {} class Vertex: def __init__(self, x): self.k …
html4.0.1，h5，xhml，文档声明区别
声明不是 HTML 标签:它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令. 提示:请始终向 HTML 文档添加 gt …
关于微软RDLC报表打印时文字拉伸问题(Windows server 2003 sp2)
最近我们开发的打印服务频频出现打印文字拉伸问题,客户意见络绎不绝,最为明显的是使用黑体加粗后 “2.0份” 打印出来后小数点几乎看不见了,用户很容易误认为 “ 20份” .所以问题达到了不得不停下手上 …
DataGridView插入一行数据和用DataTable绑定数据2种方式
以前不会用DataGridView的时候一直使用DataTable绑定的方式,如下: DataTable table = new DataTable(); //给表添加一列Name,此名字和 tabl …
The 3n + 1 problem
The 3n + 1 problem Time Limit : 2000/1000ms (Java/Other) Memory Limit : 65536/32768K (Java/Other) …
Maven干货
好处: 1. 依赖管理:对jar包统一管理 2. 项目构建: 项目编码完成后,对项目进行编译.测试.打包.部署.之前项目构建通过eclipse工具实现.今天学习新的工具也可以实现这些过程.比如:通过m …
网站加速与Linux服务器防护
网站加速方面 1. Nginx 配置 gzip 压缩 开启nginx gzip压缩后,网页.css.js等静态资源的大小会大大的减少,从而可以节约大量的带宽,提高传输效率,给用户快的体验.虽然会消耗c …
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/214123.html原文链接：https://javaforall.net
