• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    文字或图片元素在DIV中垂直居中
    复制代码 代码如下:

    !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">图片与文本内容混合br>img src="http://desk.blueidea.com/QTZY/GIF/xsgs_21/xsgs_21004.gif" alt="" />br>图片与文本内容混合/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)/设置button上的文字和图片上下垂直居中对齐
    • CSS图片响应式 垂直水平居中
    • js+CSS 图片等比缩小并垂直居中实现代码
    • javascript图片自动缩放和垂直居中处理函数
    • 用css实现图片垂直居中的使用技巧
    • 未知大小图片在已知容器中的垂直和水平居中问题
    • JS实现图片垂直居中显示小结
    上一篇:关于CSS:优先级
    下一篇:微软终于对网页三剑客下手了
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

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