CSS 图片垂直居中的两种方法
程序员文章站
2022-04-26 23:49:01
...
方法一:
使用margin方式,使图片在div中上下垂直居中。margin-top值的计算方式是:div的高度/2-图片高度/2。
代码实例如下:
使用margin方式,使图片在div中上下垂直居中。margin-top值的计算方式是:div的高度/2-图片高度/2。
代码实例如下:
码农教程
方式二:
代码实例如下:
码农教程
以上代码实现了图片上下垂直居中,不过IE7浏览器并不支持此方式。
实现方式在div中添加了如下代码:
vertical-align:middle;
display:table-cell;
line-height:400px;
大家可以把上面实例代码复制到这里运行一下,查看一下效果。
推荐阅读
-
CSS制作图片水平垂直居中_html/css_WEB-ITnose
-
css垂直居中的几种方式_html/css_WEB-ITnose
-
div中有一个marquee标签,marquee中有滚动显示的文字,如何让文字在div中垂直居中从右向左滚动显示?_html/css_WEB-ITnose
-
CSS3对背景图片的裁剪及尺寸和位置的设定方法
-
css图片响应式+垂直水平居中2_html/css_WEB-ITnose
-
HTML-移动端如何使用css让百分比布局的弹窗水平和垂直方向上居中_html/css_WEB-ITnose
-
当把宽度设为25%时,其他浏览器正常,IE7图片会掉下来,有没有好的解决方法_html/css_WEB-ITnose
-
php获取CSS文件中图片地址并下载到本地的方法,
-
转载未知大小的图片在一个已知大小容器中的水平和垂直居中(二)
-
css文字环绕图片的方法怎么实现?(附代码)