CSS 如何实现垂直居中图片弹窗的效果?

html-css038

CSS 如何实现垂直居中图片弹窗的效果?,第1张

在一个容器里再定义一个绝对定位的p容器,再在p容器里放需要垂直居中的图片,图片定义相对定位的CSS。直接上CSS代码:#pic{width:300pxheight:300pxbackground-color:greenborder:6pxsolid#ccctext-align:centerposition:relativedisplay:.

vertical-align版本:CSS1/CSS2 兼容性:IE4+ NS4+ 继承性:无

语法:

vertical-align : baseline |sub | super |top |text-top |middle |bottom |text-bottom |length

参数:

baseline : 将支持valign特性的对象的内容与基线对齐

sub : 垂直对齐文本的下标

super : 垂直对齐文本的上标

top : 将支持valign特性的对象的内容与对象顶端对齐

text-top : 将支持valign特性的对象的文本与对象顶端对齐

middle : 将支持valign特性的对象的内容与对象中部对齐

bottom : 将支持valign特性的对象的文本与对象底端对齐

text-bottom : 将支持valign特性的对象的文本与对象顶端对齐

length : CSS2 由浮点数字和单位标识符组成的长度值 | 或者百分数。可为负数。定义由基线算起的偏移量。基线对于数值来说为0,对于百分数来说就是0%。目前IE5尚不支持。请参阅长度单位

说明:

设置或检索对象内容的垂直对其方式。

对应的脚本特性为verticalAlign。请参阅我编写的其他书目。

示例:

td { vertical-align : center}