主頁(yè) > 知識(shí)庫(kù) > 文字或圖片元素在DIV中垂直居中

文字或圖片元素在DIV中垂直居中

熱門標(biāo)簽:服務(wù)器配置 銀行業(yè)務(wù) 網(wǎng)站文章發(fā)布 鐵路電話系統(tǒng) 呼叫中心市場(chǎng)需求 智能手機(jī) 美圖手機(jī) 檢查注冊(cè)表項(xiàng)
復(fù)制代碼 代碼如下:

!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=GB2312" /> 
title>Untitled Document/title> 
style type="text/css"> 
!-- 
.frame{ 
    float:left; 
    margin:2px; 

.outer { 
    height: 250px; 
    width: 240px; 
    overflow: hidden; 
    background:gold; 
    position: static !important; 
    position: relative; 
    display: table !important; 

#middle { /* for explorer only*/ 
    position: absolute; 
    top: 50%; 

#middle[id] { 
    display: table-cell; 
    vertical-align: middle; 
    position: static; 

#inner { /* for explorer only */ 
    position: relative; 
    top: -50%; 
    width: 100%; 
    margin: 0 auto; 
    text-align:center 

/style> 
/head> 

body> 
div class="frame"> 
    div class="outer"> 
        div id="middle"> 
            div id="inner">img src="http://bbs.blueidea.com/images/smilies/eek.gif" alt="" />/div> 
        /div> 
    /div> 
/div> 
div class="frame"> 
    div class="outer"> 
        div id="middle"> 
            div id="inner"> 
                img src="http://bbs.blueidea.com/images/smilies/eek.gif" alt="" />br />br /> 
                img src="http://bbs.blueidea.com/images/smilies/eek.gif" alt="" /> 
            /div> 
        /div> 
    /div> 
/div> 
div class="frame"> 
    div class="outer"> 
        div id="middle"> 
            div id="inner">圖片與文本內(nèi)容混合br>img src="http://desk.blueidea.com/QTZY/GIF/xsgs_21/xsgs_21004.gif" alt="" />br>圖片與文本內(nèi)容混合/div> 
        /div> 
    /div> 
/div> 
div class="frame"> 
    div class="outer"> 
        div id="middle"> 
            div id="inner">span>圖片與文本/span>img src="http://desk.blueidea.com/QTZY/GIF/xsgs_21/xsgs_21004.gif" alt="" align="middle" />span>圖片與文本/span>/div> 
        /div> 
    /div> 
/div>
div class="frame"> 
    div class="outer"> 
        div id="middle"> 
            div id="inner">5454545445445br>5454545445445br>5454545445445br>5454545445445br>5454545445445br>5454545445445br>5454545445445br>5454545445445br>/div>
/div> 
    /div> 
/div>
/body> 
/html>

您可能感興趣的文章:
  • iOS - UIButton(UIEdgeInsets)/設(shè)置button上的文字和圖片上下垂直居中對(duì)齊
  • CSS圖片響應(yīng)式 垂直水平居中
  • js+CSS 圖片等比縮小并垂直居中實(shí)現(xiàn)代碼
  • javascript圖片自動(dòng)縮放和垂直居中處理函數(shù)
  • 用css實(shí)現(xiàn)圖片垂直居中的使用技巧
  • 未知大小圖片在已知容器中的垂直和水平居中問(wèn)題
  • JS實(shí)現(xiàn)圖片垂直居中顯示小結(jié)

標(biāo)簽:長(zhǎng)治 紅河 新疆 河南 上海 樂(lè)山 沈陽(yáng) 滄州

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《文字或圖片元素在DIV中垂直居中》,本文關(guān)鍵詞  ;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無(wú)關(guān)。
  • 相關(guān)文章
  • 收縮
    • 微信客服
    • 微信二維碼
    • 電話咨詢

    • 400-1100-266