/CSS 图片在DIV中垂直居中的显示方法

原创 2016年05月30日 16:23:09
<style type="text/css">
.thumb{ width:120px; height:120px; border:1px solid red; display:table-cell;/*最重要*/ vertical-align:middle;/*设置水平居中*/ }
.thumb img{ border:none; max-width:100%; max-height:100%; display:block; margin:auto;/*设置垂直居中*/ }
</style>
<div class="thumb" ><A><img src="1.jpg" /></A></div>
<div class="thumb" style="margin-left:50px;"><A><img src="2.jpg" /></A></div>

纯CSS如何让图片以及DIV垂直居中显示?

图片,也就是img标签,行内元素;div,块级元素。 有时候我们会纠结于如何让这两种元素在父容器DIV中垂直居中显示(当然 ,这里我们抛开表格布局不谈,因为表格可以让内容自动垂直居中) 1....

纯css实现div中未知尺寸图片的垂直居中

1.淘宝的方法 在曾经的"淘宝UED招聘"中有这样一道题目: “使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。” 当然出题并不是随意,而是有...

图片在div中垂直居中的css

.box { /*非IE的主流浏览器识别的垂直居中的方法*/ display: table-cell; vertical-align:middle; /*设置水平居中*/ text-alig...
  • gqomg
  • gqomg
  • 2012年07月03日 09:42
  • 222

CSS文本和div垂直居中方法总结

在样式布局中,我们经常碰到需要将元素居中。通过css实现元素的水平居中较为简单:对文本,只需要对其父级元素设置text-align: center;,而对div等块级元素,只需要设置其left和rig...

CSS教程:div垂直居中的N种方法[转]

在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中...

CSS教程:div垂直居中的N种方法[转]

转载自:http://www.cnblogs.com/chuncn/archive/2008/10/09/1307321.html 在说到这个问题的时候,也许有人会问CSS中不是有verti...

CSS中让一个div垂直居中的方法,总结

1.给固定宽高的div垂直居中                显示的结果: 2.给没有固定宽的div垂直居中 通过伪元素和inline-block/verti...

css 文本和div垂直居中方法汇总

本文总结了垂直居中的各种方法,包括单行文本垂直居中、多行文本垂直居中以及div垂直居中,列出了多种情况对应的方法。读者可以根据实际需要选择合适的方法。...

html中div如何水平和垂直居中的几种css方法代码

一、记录下几种盒子居中的方法: 1、margin固定宽高居中; 2、负margin居中; 3、绝对定位居中; 4、table-cell居中; 5、flex居中; 6、transform居中...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:/CSS 图片在DIV中垂直居中的显示方法
举报原因:
原因补充:

(最多只允许输入30个字)