div中图片居中

<html>
    <head>
         <style>
            .box {
                /*非IE的主流浏览器识别的垂直居中的方法*/
                display: table-cell;
                vertical-align:middle;
                /*设置水平居中*/
                text-align:center;
                /* 针对IE的Hack */
                *display: block;
                *font-size: 175px;/*约为高度的0.873，200*0.873 约为175*/
                *font-family:Arial;/*防止非utf-8引起的hack失效问题，如gbk编码*/
                width:200px;
                height:200px;
                border: 1px solid #eee;
            }
            .box img {
                /*设置图片垂直居中*/
                vertical-align:middle;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <img src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" _fcksavedurl="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" />
        </div>
    </body>
</html>

div中图片居中

时间： 2024-10-07 02:47:22

div中图片居中的相关文章

css如何实现未知宽高div中图片垂直水平居中效果

css如何实现未知宽高div中图片垂直水平居中效果:在有时候可能有这样的情况,那就是想让一个图片在div中实现垂直水平居中效果,但是有时候div的尺寸是位置的,下面通过代码实例介绍一下在这种情况下如何实现图片的垂直水平居中效果.代码如下:实例一: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content=&q

div+css:div中图片垂直居中

div中图片垂直居中 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 .box { 8 width: 200px; 9 height:200px; 10 display: table-cell; 11 /* 水平居中 */ 12 text-align:center; 13

html基础 img标记设置图片的宽度和边框利用div使图片居中显示

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ code: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=ut

未知宽高元素如何在一个div中上下左右居中对齐

<body> <div id="div1"> <img src="../06图片懒加载/img/img1.png"/> </div></body> 那么,img元素如何在div中居中对齐呢? 第一种方法:第一步:在img标签后面添加一个span元素 <body> <div id="div1"> <img src="../06图片懒加载/img/im

div图片垂直居中如何使div中图片垂直居中

(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-04-03) 『此方法在ie7下,如果.box的高度为800等比较大的数值时,并不能起到垂直居中的作用.』点评:关于图片垂直居中的话题想必大家在论坛或者是百度搜索列表中看到了不少了吧,烦人的是没有具体或者相当详细的解决方法,希望本文所整理的知识点可以帮助到你 div相对与table对于图片的垂直居中支持的并不好,特别对于不同浏览器的兼容性来说,这里我们看下一个简洁的css解决方法: 在曾经的淘宝UED 招聘中有这样

CSS DIV中表格居中显示

将div的text-align设为center,然后将table的margin设为auto,即: <div> <table style="margin:auto; width:750px;"> </table> </div> 这样在主流浏览器中都可以实现居中.

如何让一个div在另一个div中绝对居中（水平+垂直）

html: <html> <head></head> <body> <div class="parent"> <div class="child"></div> </div> </body> </html> css: <style> .parent{ position:relative; width:600px; height:300p

css基础 overflow:hidden div中图片溢出的部分隐藏

礼悟: 公恒学思合行悟,尊师重道存感恩.叶见寻根三返一,江河湖海同一体. 虚怀若谷良心主,愿行无悔给最苦.读书锻炼养身心,诚劝且行且珍惜. ide:visual studio 2017 browser:Chrome os:win7 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu

div中图片和文字同一行实现垂直居中

vertical-align作用对象为内联元素display设置table-cell后,magin和padding就会失效 #bj { height:100px; color: white; font-size: 30px; margin: 10px 0; display: table-cell; vertical-align: middle;/*div设置高度后,内部元素垂直居中*/ } #bj * { vertical-align: middle;/*实现垂直居中*/ } <body> &