图片垂直居中的实现

最新推荐文章于 2021-05-31 14:54:15 发布

nelson

最新推荐文章于 2021-05-31 14:54:15 发布

阅读量274

点赞数

分类专栏： CSS 文章标签： border button css float input ie

本文链接：https://blog.csdn.net/Do_it__/article/details/6003232

版权

CSS 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

做的时候没有想到线上有现成的代码可以参考，网上说了很多，总的思路是都是一样的。下面写一下今天做的一个垂直居中的CSS：

<!doctype html>
<html>
<head>
<meta charset="gbk">
<title>First Grid Demo</title>
<style>
body,button,input,select,textarea{
	font:12px/1.5 Verdana,Tahoma,Arial,/5b8b/4f53;/*后面是宋体的编码*/
}
a{
	display: table-cell;
	*display: block;
	*float:left;
	width: 160px;
	height: 160px;
	vertical-align: middle;
	text-align:center;
	*font-size: 106px;
        _font-size: 130px;
	border:1px solid #CCCCCC;
	padding: 1px;
}
img{
	vertical-align: middle;
}</style>
</head>
<body>

<a href="#" mce_href="#">
	<img border="0" src="http://t0.gstatic.com/images?q=tbn:weZn-DWKsTIjpM::" />
</a>
<a href="#" mce_href="#">
	<img border="0" src="http://t0.gstatic.com/images?q=tbn:DUXAF1w8Gt6KsM::"  />
</a>
<a href="#" mce_href="#">
	<img border="0" src="http://t0.gstatic.com/images?q=tbn:oR0BiyXeyUNNCM::" />
</a>
<a href="#" mce_href="#">
	<img border="0" src="http://t0.gstatic.com/images?q=tbn:fQT_m38A8YENHM::" />
</a>
<a href="#" mce_href="#">
	<img border="0" src=&quothttp://t0.gstatic.com/images?q=tbn:EaBVN66CxKEvtM::" />
</a>
<a href="#" mce_href="#">
	<img border="0" src="img/6.jpg" mce_src="img/6.jpg" />
</a><a href="#" mce_href="#">
	<img border="0" src="img/7.jpg" mce_src="img/7.jpg" />
</a>
<a href="#" mce_href="#">
	<img border="0" src="img/8.jpg" mce_src="img/8.jpg" />
</a>
<a href="#" mce_href="#">
	<img border="0" src="img/9.gif" mce_src="img/9.gif" />
</a>
<mce:script type="text/javascript"></mce:script>
</body>
</html>

这样子就可以了。

但是经过很长时间的尝试发现，demo和实际运用还是有很多的差别的，如果需要在实际页面里去实现的话，高和宽度不一样，可能会出现不一样的问题，这个要根据实际情况去考虑。

下面是王松写的一个图片居中对齐的例子的css，它的展现跟我上面一样，我对他进行了一些修改，最后有了下面的例子：

.share-baby-index .pic-a a{ height:160px; line-height:160px; //font-size:0; _font-size:134px; /*ie6 hack*/ text-align:center; display:block; padding:4px; border:1px solid #ccc; background:#fff; } .share-baby-index .pic-a a img{ vertical-align:middle; }

不过最好可以先看一下淘宝搜索结果的那个页面。s.taobao.com

nelson

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片垂直居中的实现

做的时候没有想到线上有现成的代码可以参考，网上说了很多，总的思路是都是一样的。下面写一下今天做的一个垂直居中的CSS：对应的CSS是：div{ width: 160px; height: 160px; position: relative; display: table-cell; vertical-align: middle; *font-size: 120px; line-height: normal; text-align: center;}这样子就可以了。
复制链接

扫一扫