精华内容
下载资源
问答
  • 用一个之前没见过的方法实现一张图片的居中. 先铺html代码 <div class="container"> <div class="img"></div> </div> 为了方便看的清楚, 我给后面的container设置一些颜色和宽高 ....

    用一个之前没见过的方法实现一张图片的居中.

    先铺html代码

    <div class="container">
        <div class="img"></div>
    </div>

    为了方便看的清楚, 我给后面的container设置一些颜色和宽高

    .container{
      position: absolute;
      height: 300px;
      width: 500px;
      background-color: #f6f6f6;
      border: 1px solid #000;
    }

    然后开始设置需要居中元素的css

    方法:

    1. 首先设置它的样式, 使他绝对定位来将他放置到容器元素的左上角
    .img{
      position: absolute;
      height: 100px;
      width: 100px;
      background-color: #0084b4;
    }

    920773-20170813192656210-1213746500.png

    2. 然后设置top和left, 使元素向下和向右偏移其容器高度和宽度的50%
    .img{
      position: absolute;
      height: 100px;
      width: 100px;
      background-color: #0084b4;
      top: 50%;
      left:50%;
    }

    920773-20170813192822523-1128686146.png

    3. 再设置元素的==负外边距==

    在样式表中, 负外边距会将图片向上向左移动其图片本身高度和宽度的一半

    .img{
      position: absolute;
      height: 100px;
      width: 100px;
      background-color: #0084b4;
      margin-left: -50px;
      margin-top: -50px;
      top: 50%;
      left:50%;
    }

    或者用jQuery的方法实现

    $('.img').css({
      marginLeft: - ($('.img').width()/2),
      marginTop: - ($('.img').height()/2)
      
    })
    

    920773-20170813192842570-664607083.png

    如果img元素的width和heigh与容器元素的width和heigh相等, 则img元素就正好完全覆盖在容器元素上了.

    转载于:https://www.cnblogs.com/darthbadwolf/p/7354447.html

    展开全文
  • 目录 一、效果演示 二、实现方法 ... #div { ...<div id="div"> ...</div> ... #div { ... var div = document.getElementById('div');...无论哪种情况下都能拿到元素的宽度和高度,建议使用这种方式。

    目录

    一、效果演示

    二、实现方法

    方法一:利用CSS实现

    方法二:利用JavaScript实现

    方法三:利用JavaScript实现

    方法四:利用jQuery实现


     

    一、效果演示

    二、实现方法

    方法一:利用CSS实现

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>demo01</title>    
        <style type="text/css">
        #div {
            width: 400px;
            height: 350px;
            background-color: #c8e5bc;
            position: absolute;
            top:50%;
            left: 50%;
            margin: -200px 0 0 -175px;
        }
    
        #img {
            width: 220px;
            height: 220px;
            position: absolute;
            top:50%;
            left: 50%;
            margin: -110px 0 0 -110px;
        }
    </style>
    </head>
    <body>
    <div id="div">
        <img id="img" src="images/product4.jpg">
    </div>
    </body>
    </html>

    方法二:利用JavaScript实现

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>demo02</title>
        <style type="text/css">
            #div {
                width: 400px;
                height: 350px;
                background-color: #c8e5bc;
            }
    
            #img {
                width: 220px;
                height: 220px;         
            }
        </style>
    
        <script type="text/javascript">
    
            function centerDiv() {
                var div = document.getElementById('div');
                var width = div.offsetWidth;
                var height = div.offsetHeight;
                div.style.position = "absolute";
                div.style.left = "50%";
                div.style.top = "50%";
                div.style.marginLeft = "-" + (width / 2) + "px";
                div.style.marginTop = "-" + (height / 2) + "px";
            }
    
            function centerImg() {
                var img = document.getElementById('img');
                var width = img.offsetWidth;
                var height = img.offsetHeight;
                img.style.position = "absolute";
                img.style.left = "50%";
                img.style.top = "50%";
                img.style.marginLeft = "-" + (width / 2) + "px";
                img.style.marginTop = "-" + (height / 2) + "px";
            }
    
            window.onload = function(){
                centerDiv();
                centerImg();
            }
    
            window.onresize = function () {
                centerDiv();
                centerImg();
            }
        </script>
    
    </head>
    <body>
    <div id="div">
        <img id="img" src="images/product4.jpg">
    </div>
    </body>
    </html>

    方法三:利用JavaScript实现

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>demo03</title>
        <style type="text/css">
            #div {
                width: 400px;
                height: 350px;
                background-color: #c8e5bc;
            }
    
            #img {
                width: 220px;
                height: 220px;          
            }
        </style>
    
        <script type="text/javascript">
    
            function centerDiv() {
                var totalWidth = document.body.scrollWidth;
                var totalHeight = document.body.scrollHeight;
    
                var div = document.getElementById('div');
                var width = div.offsetWidth;
                var height = div.offsetHeight;
    
                div.style.position = "absolute";
                div.style.left = (totalWidth - width) / 2 + "px";
                div.style.top = (totalHeight - height) / 2 + "px";
            }
    
            function centerImg() {
                var div = document.getElementById('div');
                var totalWidth = div.offsetWidth;
                var totalHeight = div.offsetHeight;
    
                var img = document.getElementById('img');
                var width = img.offsetWidth;
                var height = img.offsetHeight;
    
                img.style.position = "absolute";
                img.style.left = (totalWidth - width) / 2 + "px";
                img.style.top = (totalHeight - height) / 2 + "px";
            }
    
            window.onload = function(){
                centerDiv();
                centerImg();
            }
    
            window.onresize = function () {
                centerDiv();
                centerImg();
            }
        </script>
    
    </head>
    <body>
    <div id="div">
        <img id="img" src="images/product4.jpg">
    </div>
    </body>
    </html>

    方法四:利用jQuery实现

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>demo04</title>
        <script src="scripts/jquery-3.1.1.min.js"></script>
        <style type="text/css">
            #div {
                width: 400px;
                height: 350px;
                background-color: #c8e5bc;
            }
    
            #img {
                width: 220px;
                height: 220px;         
            }
        </style>
    
        <script type="text/javascript">
    
            $(window).resize(function () {
                $('#div').css({
                        position: "absolute",
                        left: ($(window).width() - $('#div').width()) / 2,
                        top: ($(window).height() - $('#div').height()) / 2
                    }
                );
                $('#img').css({
                        position: "absolute",
                        left: ($('#div').width() - $('#img').width()) / 2,
                        top: ($('#div').height() - $('#img').height()) / 2
                    }
                );
            });
    
            $(function () {
                $(window).resize();
            })
        </script>
    
    </head>
    <body>
    <div id="div">
        <img id="img" src="images/product4.jpg">
    </div>
    </body>
    </html>
    说明:获取元素的宽度和高度,如果是行内样式,那么元素.style.width元素.style.height可以拿到元素的宽度和高度,但是对于内部样式或外部样式,此方法就不凑效,必须使用元素.offsetWidth元素.offsetHeight才能拿到元素的宽度和高度。其实用元素.offsetWidth元素.offsetHeight无论在哪种情况下都能拿到元素的宽度和高度,建议使用这种方式。
    展开全文
  • css 图片在div里居中

    2014-02-27 14:51:29
    转自:... 问:  比如500*500的div我想插入一张400*400的图片,希望图片在div的中间 。在图片的周围都和div有空隙 答:  元旦快乐啊.....  LZ真有心,在元旦居然问如此复杂的问题。不过LZ问
    转自:http://zhidao.baidu.com/question/131571863.html?qbl=relate_question_2

    问:

        比如500*500的div我想插入一张400*400的图片,希望图片在div的中间 。在图片的周围都和div有空隙

    答:
            元旦快乐啊.....
            LZ真有心,在元旦居然问如此复杂的问题。不过LZ问到了,我就说一种我个人用的方法。
    水平居中很简单,垂直居中就很困难,网上方法很多,不过都存在这样那样的兼容性问题,要么就要引入一些其他元素。考虑到后期图片自动缩放,外容器浮动等等因素,然后只利用代码,不引入其他元素。于是我在网上思路的基础上,自己写了下面的方法。

    代码如下:

    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>图片居中</title>
    
        <style>
            *
            {
                padding: 0px;
                margin: 0px;
            }
    
            /*好懂吧,宽高定义,文本居中。*/
            .conn
            {
                width: 500px;
                height: 500px;
                border: 1px solid #000;
                text-align: center;
            }
    
            /*这个LZ自己研究研究,我定义了一个高100%的块元素用来对齐img*/
            .imgmid
            {
                display: inline-block;
                *display: inline;             /*解决ie6、ie7、ie8的兼容问题*/
                *zoom: 1;                     /*解决ie6、ie7、ie8的兼容问题*/
                height: 100%;
                width: 1px;
                margin-left: -1px;
                vertical-align: middle;
            }
    
            /*好懂吧,img元素宽高,然后垂直居中对齐。*/
            .conn img
            {
                width: 400px;
                height: 400px;
                vertical-align: middle;
            }
        </style>
    </head>
    <body>
        <div class="conn">
            <img src="boy.jpg">
            <span class="imgmid"></span>
        </div>
    </body>
    </html>

    另一种利用伪类提供了更简洁的实现方法:
    详见:http://blog.csdn.net/chelen_jak/article/details/20549953

    CSS代码:
    <span class="css-class" style="color: rgb(255, 0, 255); "><span class="before">.</span>pic_box</span><span class="paren css-block-open" style="color: rgb(255, 0, 255); ">{</span><span class="builtin css-declaration-kw" style="color: rgb(0, 0, 153); ">width<span class="after">:</span></span><span class="css-length" style="color: rgb(0, 0, 255); ">300<span class="after">px</span></span>; <span class="builtin css-declaration-kw" style="color: rgb(0, 0, 153); ">height<span class="after">:</span></span><span class="css-length" style="color: rgb(0, 0, 255); ">300<span class="after">px</span></span>; <span class="builtin css-declaration-kw" style="color: rgb(0, 0, 153); ">background-color<span class="after">:</span></span><span class="css-color-spec" style="color: rgb(0, 0, 255); "><span class="before">#</span>beceeb</span>; <span class="builtin css-declaration-kw" style="color: rgb(0, 0, 153); ">font-size<span class="after">:</span></span>0; *<span class="builtin css-declaration-kw" style="color: rgb(0, 0, 153); ">font-size<span class="after">:</span></span><span class="css-length" style="color: rgb(0, 0, 255); ">200<span class="after">px</span></span>; <span class="builtin css-declaration-kw" style="color: rgb(0, 0, 153); ">text-align<span class="after">:</span></span>center;<span class="paren css-block-close" style="color: rgb(255, 0, 255); ">}</span>
    <span class="css-class" style="color: rgb(255, 0, 255); "><span class="before">.</span>pic_box</span> img<span class="paren css-block-open" style="color: rgb(255, 0, 255); ">{</span><span class="builtin css-declaration-kw" style="color: rgb(0, 0, 153); ">vertical-align<span class="after">:</span></span>middle;<span class="paren css-block-close" style="color: rgb(255, 0, 255); ">}</span>
    <span class="css-class" style="color: rgb(255, 0, 255); "><span class="before">.</span>pic_box</span><span class="css-pseudo-class" style="color: rgb(119, 119, 119); "><span class="before">:</span>after</span><span class="paren css-block-open" style="color: rgb(255, 0, 255); ">{</span><span class="builtin css-declaration-kw" style="color: rgb(0, 0, 153); ">display<span class="after">:</span></span>inline-block; <span class="builtin css-declaration-kw" style="color: rgb(0, 0, 153); ">width<span class="after">:</span></span>0; <span class="builtin css-declaration-kw" style="color: rgb(0, 0, 153); ">height<span class="after">:</span></span><span class="css-length" style="color: rgb(0, 0, 255); ">100<span class="after">%</span></span>; <span class="builtin css-declaration-kw" style="color: rgb(0, 0, 153); ">content<span class="after">:</span></span><span class="string" style="color: rgb(34, 136, 34); "><span class="before" style="color: rgb(0, 68, 0); ">"</span>center<span class="after" style="color: rgb(0, 68, 0); ">"</span></span>; <span class="builtin css-declaration-kw" style="color: rgb(0, 0, 153); ">vertical-align<span class="after">:</span></span>middle; <span class="builtin css-declaration-kw" style="color: rgb(0, 0, 153); ">overflow<span class="after">:</span></span>hidden;<span class="paren css-block-close" style="color: rgb(255, 0, 255); ">}</span>
    HTML代码:
    <span class="paren xml-tagangle" style="color: rgb(0, 0, 153); "><</span><span class="keyword xml-tag xml-tag-open" style="color: rgb(0, 0, 255); ">div</span> <span class="builtin xml-attribute" style="color: rgb(34, 34, 204); ">class</span><span class="undefined"></span><span class="operator" style="color: rgb(0, 119, 119); ">=</span><span class="string" style="color: rgb(34, 136, 34); "><span class="before" style="color: rgb(0, 68, 0); ">"</span>pic_box<span class="after" style="color: rgb(0, 68, 0); ">"</span></span><span class="paren xml-tagangle" style="color: rgb(0, 0, 153); ">></span>
        <span class="paren xml-tagangle" style="color: rgb(0, 0, 153); "><</span><span class="keyword xml-tag xml-tag-open" style="color: rgb(0, 0, 255); ">img</span> <span class="builtin xml-attribute" style="color: rgb(34, 34, 204); ">src</span><span class="undefined"></span><span class="operator" style="color: rgb(0, 119, 119); ">=</span><span class="string" style="color: rgb(34, 136, 34); "><span class="before" style="color: rgb(0, 68, 0); ">"</span>http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg<span class="after" style="color: rgb(0, 68, 0); ">"</span></span> <span class="paren xml-tagangle" style="color: rgb(0, 0, 153); ">/></span>
    <span class="paren xml-tagangle" style="color: rgb(0, 0, 153); "></</span><span class="keyword xml-tag xml-tag-close" style="color: rgb(0, 0, 255); ">div</span><span class="paren xml-tagangle" style="color: rgb(0, 0, 153); ">></span>



    展开全文
  • <!... <title></title> ...支持将任意的元素标签、、居中显示 flex-direction: column; justify-content: center; align-items: center; //这三个样式标签自己体验下就知道有什么作用  
    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            body{
                margin: 0px auto;
            }
            .app {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                width: 100vw;
                height: 100vh;
                font-size: 8rem;
                background: hsl(240, 100%, 67%);
                color: hsl(0, 0%, 100%);
            }
        </style>
    </head>
    
    <body>
        <div class="app">
            <h3>Hey</h3>
        </div>
    </body>
    
    </html>

     

    支持将任意的元素标签<p>、<h2>、<img>居中显示

    flex-direction: column;
    
    justify-content: center;
    
    align-items: center;
    
    //这三个样式标签自己体验下就知道有什么作用

     

    展开全文
  • css 关于ul在div里居中且平铺的问题

    万次阅读 2015-08-13 15:08:49
    今天在调整ul居中的问题时,遇到了点小困难,以前在使用ul时候,让其不是垂直的排列而是,横着排列都是使用float:left这个属性,但是呢,今天我在弄一些友情链接的时候,就出现了ul在div居中不了的问题,就是在div...
  • 子divdiv里居中

    2019-07-11 18:42:00
    万能方式二:仍然是绝对布局,让left和top都是50%,这水平方向上让div的最左与屏幕的最左相距50%,垂直方向上一样,所以再用transform向左(上)平移它自己宽度(高度)的50%,也就达到居中效果了,效果图和上方...
  • 这里的checkbox是没有居中对齐的,网上找了好多方法,起初我想到的是,根据js动态获取父节点的高度然后动态加到checkbox的div上,然后设置行高,后来会出现一直点刷新会出现问题。然后看到知乎大神使用css3的方法...
  • 如何让图片在div里左右居中,上下居中 转载▼  1、要想让图片左右对齐,我们可以在div里写入"style:text-align:center;"代码来实现。 2、要想使图片居中,多数人可能会考虑使用"vertical-align:middle"代码。...
  • 1.DIV居中:主要的样式定义如下: body{}{text-align:center;}#center{}{margin-right:auto;margin-left:auto;} 说明:首先父级元素定义text-align:center;这个的意思就是父级元素内的内容居中;对于ie这样...
  • 子divdiv里底部居中

    千次阅读 2019-05-19 17:48:41
    div: position relative 子div: position absolute bottom 0 left 50% transform: translateX(-50%); 效果如下图。 ps:我其他博客看到很多人的写法是 transform: translate(-50%, -50%); 这个我这里...
  • 主体div的css,也可以写成` 这部分的内容相对父类div是垂直居中
  • 如何让上面灰色有文字那个div和背景图标垂直居中,不管屏幕大小有好大,始终垂直方向上的中间。上面有整个布局和样式表,谢谢高手指点 CSS3时代当然要用CSS3的完美解决办法。不能忍受以前的height和line-...
  • 只有一行文字的话,直接用line-hight可以解决。 有多行文字或是想要子div在父div里垂直居中: 首先要理解vertical-align: ...在div里增加一个隐藏子元素,高度为100%和父div一样,这样再设置vertical-align: mid...
  • display: inline-block; /一定要将div设置为inline-block/ vertical-align: middle;/设置该元素父元素中的位置/
  • body { background-color: #ececec; } .d1 { text-align: center; position: relative;... <div class="d1"> <p>ssss </div> 转载于:https://www.cnblogs.com/feiwenstyle/p/10184133.html
  • 1. .parent { width:800px; height:500px; border:2px solid #000; position:relative; } .child { width:200px; height:200px; m...
  • 用js 让图片 div或dl 居中,底部对齐
  • 很多人都知道,无论是图片还是文字,在div里面水平居中是很容易的,而垂直居中却比较困难。今天一个偶然的尝试,让我解决了这个问题。 这里涉及到两个属性,一个是line-height,另一个是vertical-align。在IE里面,...
  • 让图片在div容器上下左右居中,在实际应用中是很常见的,下面为大家演示个示例,希望对大家有所帮助
  • HTML: <div class="parent"> <div class="children"> <div class="close"> <img src="image/ico/icon-close.png" /> </div>...
  • 方法1: .parent { width:800px; height:500px; border:2px solid #000; position:relative; } .child { width:200px; height:200p...
  • 方法一:图片尺寸未知,IE8-不支持 CSS部分: <style> .content{ width:500px; height:500px; border:1px solid black; position:relative; } <...div class="content"&g...
  • 在DIV里面让图片居中

    2015-06-30 13:47:00
    .content.itemDiv{ display: table-cell;width: 171px;height: 133px;text-align: center; vertical-align: middle; background:url(../images/itembg2.png) no-repeat center;padding: 11px;} <div class=".....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 867
精华内容 346
关键字:

在div里居中