WCDSTUDIO专注于互联网服务!
24小时网站建设热线:15006227297
首页网站运营网站建设教程

网站运营

官方动态

网站建设教程

网站建设知识

网站建设与管理

图片水平垂直居中方案

网站建设中经常有的时候会遇到客户给的图片大小尺寸不统一,造成了在后台上传了之后,前台显示错位的现象。



不同尺寸的图片水平垂直居中


解决的方案如下:

<!doctype html>

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
<!--
*{margin:0;padding:0;}
.text{ width:200px; height:200px; border:1px solid #eee;display:table-cell;text-align:center;vertical-align:middle;}
.text img{ max-width:200px; max-height:200px;}
-->
</style>
</head>
<body>
<div class="text"><img src="58be4e56188e9.jpg" alt="" align="top" /></div>
<div class="text"><img src="top2.jpg" alt="" align="top" /></div>
</body>
</html>

发表时间

20170321

发布人

昆山网站建设,昆山网络公司

被浏览次数

WCDSTUDIO专注于互联网服务

立即沟通您的需求
版权所有 WCDSTUDIO © All Rights Reserved 2015-2019CSS快速查询CSS选择符演示html常用标签演示flexui