您的位置：首页 > 其它

NO。59 图片嵌入文字并且居中

2011-05-12 10:14 148 查看

类似这样的效果，左右是两段文字，但是中间的图片是嵌入居中的

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>图片嵌入文字并且居中</title>
6 <style>
7
8 #page-wrap { width: 60%; margin: 0px auto; position: relative; }
9
#logo { position: absolute; top: 0; left: 50%; margin-left: -138px; }

#l, #r { width: 49%; }
#l { float: left; }
#r { float: right; }

#l:before, #r:before { content: ""; width: 138px; height: 110px; }

#l:before { float: right; }
#r:before { float: left; }

</style>
</head>

<body>
<div id="page-wrap">
<img id="logo" src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.png"/>
<div id="l">图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！</div>
<div id="r">图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！</div>
</div>
</body> </html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航