2013-05-13 分類: 網站建設
初學者在用div做網站的時候
常常會碰到這樣一個問題
在同一行里面
同時插入圖片和文字的時候
默認是底對齊
這實在是太不爽了
一看上去就覺得不和諧嘛
當然,大家可以有很多種方法實現
例如把圖片放在一個div里
后面的文字再放一個div里
這樣互不干擾,就可以隨意定位置了
八過,我們曾經說過,要盡量用簡單的代碼把網站寫出來
你這樣做效果確實可以出來,不覺得div有點太多了嗎
其實解決這個問題的方法很簡單
你可以把圖片和文字寫在一個div里
然后,只要對圖片加一個屬性:vertical-align:middle就可以實現了!
下邊是給大家總結的源代碼,希望可以給大家有幫助
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style>
.main{ width:100%; height:48px;}
.jvzhong{ width:1000px; height:48px; margin:0 auto;}
.main ul li{ float:left; width:33.2%;text-align:center;}
.teshu{ border-right:1px #aaa solid; border-left:1px #aaa solid;}
.mid{ vertical-align:middle; margin-right:20px;}
ul,li{ margin:0; padding:0;}
li{ list-style:none;}
</style>
</head>
<body>
<div class="main"
<div class="jvzhong">
<ul>
<li>
<img class="mid" src="image/icon-mi.png" />
成都創新互聯
</li>
<li class="teshu">
<img class="mid" src="image/icon-mi.png" />
成都創新互聯
</li>
<li>
<img class="mid" src="image/icon-mi.png" />
成都創新互聯
</li>
</ul>
</div>
</div>
</body>
</html>
網站名稱:div網站建設的時候如何讓圖片和文字都水平居中?
瀏覽地址:http://m.newbst.com/news23/723.html
網站建設、網絡推廣公司-創新互聯,是專注品牌與效果的網站制作,網絡營銷seo公司;服務項目有網站建設等
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯
猜你還喜歡下面的內容