div網站建設的時候如何讓圖片和文字都水平居中？

2013-05-13    分類： 網站建設

初學者在用div做網站的時候

常常會碰到這樣一個問題

在同一行里面

同時插入圖片和文字的時候

默認是底對齊

這實在是太不爽了

一看上去就覺得不和諧嘛

當然，大家可以有很多種方法實現(xiàn)

例如把圖片放在一個div里

后面的文字再放一個div里

這樣互不干擾，就可以隨意定位置了

八過，我們曾經說過，要盡量用簡單的代碼把網站寫出來

你這樣做效果確實可以出來，不覺得div有點太多了嗎

其實解決這個問題的方法很簡單

你可以把圖片和文字寫在一個div里

然后，只要對圖片加一個屬性：vertical-align：middle就可以實現(xiàn)了！

下邊是給大家總結的源代碼，希望可以給大家有幫助

<!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" />
            成都創(chuàng)新互聯(lián)
        </li>
<li class="teshu">
       <img class="mid" src="image/icon-mi.png" />
            成都創(chuàng)新互聯(lián)
        </li>
        <li>
       <img class="mid" src="image/icon-mi.png" />
            成都創(chuàng)新互聯(lián)
        </li>
    </ul>
</div>
</div>

</body>
</html>

網站名稱：div網站建設的時候如何讓圖片和文字都水平居中？
瀏覽地址：http://www.bm7419.com/news23/723.html

網站建設、網絡推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網站制作，網絡營銷seo公司；服務項目有網站建設等

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)

微信小程序開發(fā)

網站建設知識