类似这样的效果，左右是两段文字，但是中间的图片是嵌入居中的
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
10 #logo { position: absolute; top: 0; left: 50%; margin-left: -138px; }
11
12 #l, #r { width: 49%; }
13 #l { float: left; }
14 #r { float: right; }
15
16 #l:before, #r:before { content: ""; width: 138px; height: 110px; }
17
18 #l:before { float: right; }
19 #r:before { float: left; }
20
21 </style>
22 </head>
23
24 <body>
25 <div id="page-wrap">
26 <img id="logo" src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.png"/>
27 <div id="l">图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！</div>
28 <div id="r">图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！</div>
29 </div>
30 </body>
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
10 #logo { position: absolute; top: 0; left: 50%; margin-left: -138px; }
11
12 #l, #r { width: 49%; }
13 #l { float: left; }
14 #r { float: right; }
15
16 #l:before, #r:before { content: ""; width: 138px; height: 110px; }
17
18 #l:before { float: right; }
19 #r:before { float: left; }
20
21 </style>
22 </head>
23
24 <body>
25 <div id="page-wrap">
26 <img id="logo" src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.png"/>
27 <div id="l">图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！</div>
28 <div id="r">图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！图片嵌入文字并且居中！</div>
29 </div>
30 </body>
31 </html>
