css 组件水平居中,CSS水平居中

一、使用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 ...