CSS让图片垂直居中和底端对齐的代码_css图片底部对齐 - CSDN文库

197 浏览量更新于2023-05-04 评论收藏 31KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

CSS让图片垂直居中和底端对齐的代码让图片垂直居中和底端对齐的代码

本CSS教程提供了两种对齐方式即垂直居中对齐和底端对齐！更多内容请参考本站的CSS视频教程。

CSS使图片垂直居中的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">

<head>

<title>图片垂直居中</title>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<style type="text/css" media="all">

div,img{margin: 0;padding: 0;border: 0;}#content{width: 303px;height: 404px;background: #F63;color: #000;font: 12px

Arial,Helvetica,sans-serif;position: relative;}#content[id]{display: table;position: static;}#middle{position: absolute;left: 0;top:

50%;}#middle[id]{display: table-cell;vertical-align: middle;position: static;}#inner{position: relative;left: 0;top: -50%;}

</style>

</head>

<body>

<div id="content">

<div id="middle">

<div id="inner">垂直居中<br />

<img src="http://huoche.7234.cn/images/jb51/jlhoc5w2ycn.gif"

_fcksavedurl="http://huoche.7234.cn/images/jb51/jlhoc5w2ycn.gif" alt="软件开发网logo" title="软件开发网logo" /></div>

</div>

</div>

</body>

</html>

演示效果如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">

<head>

<title>图片垂直居中</title>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<style type="text/css" media="all">

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余2页未读，立即下载

评论0

weixin_38570145

粉丝: 4
资源: 924

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈