网页制作实例：用CSS实现图片垂直居中方法

2016-02-19 17:20 11 1 收藏

给自己一点时间接受自己,爱自己，趁着下午茶的时间来学习图老师推荐的网页制作实例：用CSS实现图片垂直居中方法，过去的都会过去，迎接崭新的开始，释放更美好的自己。

【 tulaoshi.com - Web开发】

　　网页制作，用CSS实现图片垂直居中方法

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"style type="text/css"!--body {margin:0;padding:0}div {width:500px;height:500px;line-height:500px;border:1px solid #ccc;overflow:hidden;position:relative;text-align:center;margin:auto}div p {position:static;+position:absolute;top:50%}img {position:static;+position:relative;top:-50%;left:-50%;width:276px;height:110px;vertical-align:middle}p:after {content:".";font-size:1px;visibility:hidden}--/styledivpimg src="http://www.ddvip.com/images/Logo.gif"//p/div

来源:http://www.tulaoshi.com/n/20160219/1614991.html

看过《网页制作实例：用CSS实现图片垂直居中方法》的人还看了以下文章更多>>

CSS网页布局：div垂直居中的各种方法

标签： Web开发

在前面的文章中我简单总结了一个CSS在页面布局中实现div水平居中的方法，其实水平居中实现还是比较简单的，反而垂直居中有点麻烦，因为我们设计页面的时候往往水平宽度都是固定的。因此我们有必要总结一下在页面布局过程中实现垂直居中的方法。在说到这个问题的时候，也许有人会问CSS中不是有vertical-align属性来设置...

CSS实现未知高度图文混合垂直居中

标签： Web开发

CSS* { margin:0; padding:0; list-style:none; } #vertical_box { width:100%; display:table; border:1px red solid; height:400px; /*针对IE的hack*/ *position:relative; } #vertical_box_sub { display: table-cell; vertical-align: middle; /*针对IE的hack*/ *position:absolute; *top:50%; } #vertical_box_container { fo...

CSS教程：在网页布局中简单实现垂直居中的办法

标签： Html CSS布局 Div+CSS XHTML

英文原文： http://www.search-this.com/2008/05/15/easy-vertical-centering-with-css/ 中文译文： http://www.12sui.cn/blog/71.html 本人英语还没过四级，所以不能说是翻译把，只能说是按照自己的理解去叙述了一遍作者的意思，请各位多多指教。译文内容：当你发觉你曾经以为的事实其实并不是那样，你会感觉很开心。旧的方法经...

CSS技巧：如何使未知高宽的图片实现垂直居中

标签： Html CSS布局 Div+CSS XHTML

在一个容器里再定义一个绝对定位的p容器，再在p容器里放需要垂直居中的图片，图片定义相对定位的CSS。直接上CSS代码： #pic { width:300px; height:300px; background-color:green; border:6px solid #ccc; text-align:center; position:relative; display:table-cell; vertical-align:middle; } #pic p { *position:absolute;...

DIV实现垂直居中对齐的方法

标签： Web开发

尽管有CSS的vertical-align特性，但是并不能有效解决未知高度的垂直居中问题(在一个DIV标签里有未知高度的文本或图片的情况下)。标准浏览器如Mozilla, Opera, Safari等.，可将父级元素显示方式设定为TABLE(display: table;) ，内部子元素定为table-cell (display: table-cell),通过vertical-align特性使其垂直居中，但非标准浏览器是不支持...

查看更多精彩>>