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

2022-04-15 0 704

复制代码 代码如下:

<!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>

免责声明:
1、本网站所有发布的源码、软件和资料均为收集各大资源网站整理而来;仅限用于学习和研究目的,您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。 不得使用于非法商业用途,不得违反国家法律。否则后果自负!

2、本站信息来自网络,版权争议与本站无关。一切关于该资源商业行为与www.niceym.com无关。
如果您喜欢该程序,请支持正版源码、软件,购买注册,得到更好的正版服务。
如有侵犯你版权的,请邮件与我们联系处理(邮箱:skknet@qq.com),本站将立即改正。

NICE源码网 CSS/HTML 文字或图片元素在DIV中垂直居中 https://www.niceym.com/13472.html