[转]div 让文字或图片居中

最新推荐文章于 2023-08-27 15:20:40 发布

weixin_34075268

最新推荐文章于 2023-08-27 15:20:40 发布

阅读量101

点赞数

本文提供了两种使用CSS实现div中的文字或图片水平垂直居中的方法。第一种通过设置table-cell和vertical-align属性来达到居中效果；第二种适用于IE浏览器，通过绝对定位和table-cell等属性实现元素的精确居中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文转自：http://qsfwy.iteye.com/blog/250206

在div 中让 文字或图片居中,请参考以下代码1：
 
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>居中</title>
</head>
<style type="text/css">
.imageWrap{ width:200px; height:200px; text-align:center; border:#999 solid 1px; display:table-cell; vertical-align:middle; position:relative;}
.imageWrap .outer{ +position:absolute; +top:50%;+left:0}
.imageWrap .inner{ +position:relative; +top:-50%;+left:0}
.imageWrap img{ display:block; margin:0 auto}
</style>
<body>
<div class="imageWrap">
<div class="outer">
<div class="inner">
<img src="http://www.baidu.com/img/baidu.gif"/>
<a href="#">百度</a>
</div>
</div>
</div>
</body>
</html>
 
 
 
参考代码2：
 
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 
 
 
<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>