CSS对齐示例


  1. 对齐的难易度是看是否已知元素的固定宽高;
  2. 元素内元素对齐, 需要有一定宽高的空间

文本对齐

text-align: left(左) | right(右) | center(中) | justify(两端) | inherit(继承)

line-height: 1.5 | 25px | 120% | inherit

水平对齐

左对齐-中文abc
右对齐-中文abc
居中对齐-中文abc

两端对齐针对段落生效, 每行开头结尾的文字对齐.

鲁迅之所以被成为文豪,是因为他的文章所讽刺的是一些社会的普遍现象,虽然很辛辣很尖锐,但是却非常有普遍性。...等等。

垂直对齐

行高

左对齐-中文abc height: 50px;line-height: 50px;

上下内填充

左对齐-中文abc padding-top: 15px;padding-bottom: 15px;

表格模式 - 单元格

左对齐-中文abc height: 50px;display: table-cell;vertical-align: middle;

块元素对齐

水平居中通过margin: 0 auto;实现.

垂直居中对齐 绝对定位与负边距

内容
html css
<div id="exl-parent" >
	<div id="exl-child" >内容</div>
</div>
					
#exl-parent{  /* 父元素必须设置宽度和款都, 否则子元素定位会跑出父元素 */
	position: relative;
	widows: 100%;
	height: 200px;
}
#exl-child{
	position: absolute;
	top: 50%;
	left: 50%;
	height: 50px; /* 高度也使用百分比会显示异常, 需要固定的高度 */
	width: 50%;
	
	margin-top: -25px; /* 顶部 - 一半的高度 */
	margin-left: -25%;  /* 左部 - 一半的宽度 */
}
					

垂直居中对齐 绝对定位与拉伸 IE7+

内容
html css
<div id="exl-parent" >
	<div id="exl-child" >内容</div>
</div>
					
#exl-parent{
	position: relative;
	widows: 100%; 
	height: 200px;
}
#exl-child{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 50%; /* 拉伸后再设置宽高 */
	height: 30%;
	margin: auto;
}
					

垂直居中对齐 相同的顶部和底部填充

内容
html css
<div id="exl-parent" >
	<div id="exl-child" >内容</div>
</div>
					
#exl-parent{
	widows: 100%; /* 不能设置高度 */
	padding: 5% 0;
}
#exl-child{
	padding: 5% 0; /* 自身内容垂直居中 */
	width: 50%; /* 高度百分比无效 */
	margin: auto;
}
					

垂直居中对齐 浮动DIV

内容
html css
<div id="exl-parent">
	<div id="floater"></div>
	<div id="exl-child">内容</div>
</div>
					
#exl-parent{
	height: 250px;
}
#floater{
	float: left;
	height: 50%;
	width: 100%;
	margin-bottom: -50px; /* 内容div高度的一半 */
}
#exl-child{
	clear: both;
	height: 100px;
	
	/* 水平居中 */
	width: 50%;
	margin: auto;
}
					

行内垂直对齐 图文, input与文字

vertical-align: 该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐,只有元素属于inline-block ,vertical-align属性才会起作用

vertical-align属性只会在inline-block水平的元素上期作用,但是其影响到的元素涉及到inline属性的元素, inline水平元素受vertical-align属性而位置改变等不是因为其对vertical-align属性敏感或起作用,而是受制于整个line box的变化而不得不变化

例如图片,按钮,单复选框,单行/多行文本框等HTML控件,只有这些元素默认情况下会对vertical-align属性起作用。

注意: 垂直对齐只对inline-block元素设置有效, 但会影响同行内的inline元素.

游览器默认效果展示:

. 点

可明显看到图片底部的间隙, 因为默认是vertical-align: baseline;

button标签不受影响
多选 多选 多选 多选

input的按钮也可看出底部有间隙, 因为默认vertical-align: baseline;

注意: qpf-ui 已预设元素为垂直底部对齐, 图片垂直居中对齐, 单选采用默认的baseline看起来最好!

中文abc

一段文本baseline基线

一段文本sub下标

一段文本super上标

一段文本text-top文字顶端对齐

一段文本text-bottom文字低端对齐

一段文本middle父元素中部

一段文本top行最高元素顶端对齐

一段文本bottom行最低元素低端对齐

vertical-align
/* 关键值 */
vertical-align: baseline;    /*默认。元素放置在父元素的基线上*/
vertical-align: sub;         /*垂直对齐文本的下标*/
vertical-align: super;       /*垂直对齐文本的上标*/
vertical-align: text-top;    /*把元素的顶端与父元素字体的顶端对齐*/
vertical-align: text-bottom; /*把元素的底端与父元素字体的底端对齐。*/
vertical-align: middle;      /*把此元素放置在父元素的中部*/
vertical-align: top;         /*把元素的顶端与行中最高元素的顶端对齐*/
vertical-align: bottom;      /*把元素的顶端与行中最低的元素的低端对齐*/

/* 长度值 */
vertical-align: 10em;
vertical-align: 4px;

/* 百分比值 */
vertical-align: 20%;

/* 全局值 */
vertical-align: inherit;    /*规定应该从父元素继承 vertical-align 属性的值*/
vertical-align: initial;    /*设置属性的初始值——浏览器的默认定义值*/ 

vertical-align: unset;
/*CSS 关键字 unset 是 关键字 initial 和 inherit的组合。 
如果有继承父级样式,则将该属性重新设置为继承的值,如果没有继承父级样式,则将该属性重新设置为初始值。
换句话说这个unset关键字会优先用inherit的样式,其次会应该用initial的样式。*/

/*
- 只有元素属于inline或是inline-block ,vertical-align属性才会起作用。 
- vertical-align,取值是百分数值时,是相对于此标签继承的line-height值决定的。 
- line-height,取值是百分数值时,是相对于当前的font-size值决定的。 
- 
 */

					

项目对齐