文字或图片元素在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">5454545445445<br>5454545445445<br>5454545445445<br>5454545445445<br>5454545445445<br>5454545445445<br>5454545445445<br>5454545445445<br></div>
</div> 
    </div> 
</div>
</body> 
</html>

赞 (0)

相关推荐

  • iOS - UIButton(UIEdgeInsets)／设置button上的文字和图片上下垂直居中对齐

    iOS - UIButton(UIEdgeInsets)／设置button上的文字和图片上下垂直居中对齐

    UIEdgeInsets typedef struct UIEdgeInsets { CGFloat top, left, bottom, right; // specify amount to inset (positive) for each of the edges. values can be negative to 'outset' } UIEdgeInsets; 在UIButton中有三个对EdgeInsets的设置:ContentEdgeInsets.titleEdgeInsets

  • CSS图片响应式 垂直水平居中

    CSS图片响应式 垂直水平居中

    我看最近微博流行CSS居中技术,我看了几编资料写的都不多好,于是抽时间把相关资料整合了,具体内容如下. 点击此处下载源码 效果展示: 要求: 1.尽可能兼容更多浏览器,这里兼容到ie7,ie6不支持max-*就不考虑了. 2.浏览器尺寸变化时,图片总是等比例拉伸或缩放. 3.包裹图片的div也是响应式的,并且每个div的尺寸是一样的. 4.图片始终保持水平垂直居中. 5.图片的行列数不变,这里一直都是3*3. 下面来搞定一个个要求. 满足要求1意味着这里要尽量不使用高级浏览器才有的属性,比如高级

  • javascript图片自动缩放和垂直居中处理函数

    javascript图片自动缩放和垂直居中处理函数

    复制代码 代码如下: <html> <head> <title>Untitled</title> <style type="text/css"> .testCss{width:200px;height:300px;border:1px red solid;text-align:center;display:block;} .testCss1{width:300px;height:300px;border:1px red sol

  • 用css实现图片垂直居中的使用技巧

    题目的难点在于两点: 垂直居中: 图片是个置换元素,有些特殊的特性. 至于如何解决,下面是一个权衡的相对结构干净,CSS简单的解决方法: .box { /*非IE的主流浏览器识别的垂直居中的方法*/ display: table-cell; vertical-align:middle; /*设置水平居中*/ text-align:center; /* 针对IE的Hack */ *display: block; *font-size: 175px;/*约为高度的0.873,200*0.873 约为

  • JS实现图片垂直居中显示小结

    第1种,居中效果 <div class="box"> <div class="center">居中效果</div> </div> /*第1种,垂直居中效果*/ .box{ width: 200px;height: 200px;border: 1px solid #ccc; position: relative; } .center{ width: 100px;height: 100px;background: gray

  • 未知大小图片在已知容器中的垂直和水平居中问题

    除特别说明外,本站内容采用创作共用授权署名和非商业用途,请尊重劳动成果. CSS布局中,未知大小图片的垂直居中,一直是比较头疼的问题,标准浏览器只要设定容器的line-height和图片的vertical-align:middle;就可以了,但对IE没用,几个月前在国外网站看到了一则对IE的解决方法,感觉不是很理想,也没当回事.最近看到经常有朋友在问类似的问题,又把代码翻了出来,针对IE改了下. CSS .box{  height:140px;  width:200px;  border: so

  • js+CSS 图片等比缩小并垂直居中实现代码

    复制代码 代码如下: <!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=&qu

  • 文字或图片元素在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=

  • javascript随机将第一个dom中的图片添加到第二个div中示例

    javascript随机将第一个dom中的图片添加到第二个div中去,此代码的是一个简单的例子,将第一个div中的五张图片中,提取随机两张显示到第二个div中. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=

  • Jsp中如何让图片在div中居中

    Jsp中如何让图片在div中居中

    jsp中让图片在div中居中显示,如上图 例子: 复制代码 代码如下: //CSS文件 <style type="text/css"> #bj{ width:200px; height:200px; border:3px solid red; text-align:center; vertical-align:middle; display:table-cell; //将对象作为表格单元格显示 background:pink; } img{ width:150px; hei

  • JS+CSS设置img在DIV中只显示Img垂直居中的部分

    JS+CSS设置img在DIV中只显示Img垂直居中的部分

    一个Div中显示Img,img的宽和Div相同,但高不固定,要求只显示Img垂直居中的部分. 示例: 原图: 代码实现: 复制代码 代码如下: <div style="width: 190px; height: 100px; overflow: hidden;"> <img src="http://beijing.timeoutcn.com/UserFiles/Images/2013-10-21/20131021104840077cover-22-1.jpg

  • 文字溢出实现溢出的部分再放入一个新生成的div中具体代码

    看到群里有人提了一个问题,说文字溢出,如何实现溢出的文字放入一个新生成的div中, 想了一下原理,就是判断是否能在div里放下,如果不能,则在应该断开的地方,差入到新的div中,代码如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &

  • jquery实现两个div中的元素相互拖动的方法分析

    本文实例讲述了jquery实现两个div中的元素相互拖动的方法.分享给大家供大家参考,具体如下: 这里写了两个实例,两个都是基于jquery实现的.如果有更好的方法,欢迎分享. 第一个效果图: 拖动中: 拖动完成后: 代码实现: <!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="styles

  • CSS将div内容垂直居中案例总结

    CSS将div内容垂直居中案例总结

    一.行高(line-height)法 如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可,比如: p { height:30px; line-height:30px; width:100px; overflow:hidden; } 这段代码可以达到让文字在段落中垂直居中的效果. 二.内边距(padding)法 另一种方法和行高法很相似,它同样适合一行或几行文字垂直居中,原理就是利用padding将内容垂直居中,比如: p { padding:20px 0

  • JavaScript实现文字与图片拖拽效果的方法

    本文实例讲述了JavaScript实现文字与图片拖拽效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>JavaScript实现文字与图片的拖拽效果</title> <style type="text/css"> *{padding:0;margin:0;} .tips{position:absolute;background:#eee;} </style

  • jquery实现marquee效果(文字或者图片的水平垂直滚动)

    jquery实现marquee效果(文字或者图片的水平垂直滚动)

    原本在前端html代码中,实现文字或者图片的水平垂直滚定,都是使用的marquee,但随着考虑浏览器的兼容性和符合为w3c的标准,后来想想那还是使用javascript代码来实现.后来又喜欢上了jquery,下面写的内容希望对初学者有些帮助,高手勿喷,但欢迎指导,感激不尽. 原理:无缝滚动的原理,就是利用两个内容相同的容器,来达到欺骗人的视觉的效果.然后通过整个大容器滚动条的左右或者上下的移动来实现滚动.下面附上一张手绘的图,来简要阐述下原理.首先,我们的目的是实现框1中的内容水平向左滚动(向右

随机推荐