當前位置:蘿卜系統下載站 > 網頁設計教程 > 詳細頁面

如何讓div內容居中_如何讓div文字居中_如何讓div圖片居中

如何讓div內容居中_如何讓div文字居中_如何讓div圖片居中

更新時間:2023-06-17 文章作者:未知 信息來源:網絡 閱讀次數:

網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言,是因為文本中包含了所謂“超級鏈接”點。

DIV+CSS是現在網頁設計中越來越流行的一種網頁標準,前臺的設計越來越拋棄了TABLE的設計應用,現在前臺美工如果不懂DIV+CSS可以說真的有點落伍了,今天我們要講的是如何讓div內容居中(文字或圖片),下面分幾個部分來講。

一、讓div文字居中

如果要讓DIV中的文字居中,就得用到文字對齊方式代碼text-align:center,這個居中默認為水平居中,詳細代碼寫法如下:

div { 
border:1px solid red;
text-align:center;
}

如果要DIV中的文字垂直居中,你就必須要用到文本高度這個屬性(line-height),這樣文字才能垂直居中,代碼如下:

div { 
border:1px solid red; 
line-height:55px;
}

二、讓div圖片居中

如果我們要讓DIV中的圖片居中,用普通的方法無法實現,用"vertical-align:middle;"和用img的align="absmiddle"都失效,通過測試,這里得用到vertical-align:middle和font-size:**px這兩個屬性設置,代碼舉例如下:

.s{ height:100px; font-size:87.5px; border:1px #FF0000 solid; } 
.s img{ vertical-align:middle;  } 
<div class="s">
<img src="http://www.xue51.com/logo.jpg" /> </div>

這里特別說明:font-size:87.5px;這個是關鍵,必須設置height高度的87.5%,例如:height:50,那么font-size:44,如果這個設置好圖片居中設置會無效的哦。


網站建設是一個廣義的術語,涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。

溫馨提示:喜歡本站的話,請收藏一下本站!

本類教程下載

系統下載排行

亚洲嫩草影院久久精品