精华内容
下载资源
问答
  • 目录 一、效果演示 二、实现方法 ... #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无论在哪种情况下都能拿到元素的宽度和高度,建议使用这种方式。
    展开全文
  • 让图片在div里居中(三种方法)

    千次阅读 2021-03-01 19:19:08
    当我们将一张 img 放在 一个 div 的时候,具有超高审美的我们,硬是要将 img 居中div。所以,产什么以下解决方法。 解决方法 布局文件代码 <div class="content"> <img src="img_p1_title.png"&...

    问题

    当我们将一张 img 放在 一个 div 里的时候,具有超高审美的我们,硬是要将 img 居中于 div。所以,产什么以下解决方法。

    解决方法

    布局文件代码

    <div class="content">
         <img src="img_p1_title.png">
    </div>

    第一种方法:

    .content{
      width:340px;
      height:40px;
      display: flex;
      justify-content: center;
      align-items: center;  
    }

    第二种方法:

    .content{
      width:340px;
      height:40px;
      vertical-align: middle;
      display: table-cell;
      text-align: center;
    }

    第三种方法

    .content{
       width:340px;
       height:40px;
       position: relative;
    }
    .content img{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    注意

    如果你的布局没居中,请检查:

    外层 div 给了 宽高吗?如果你用的第三种方法,是否符合“子绝父相”原理?

    以上两种都没问题,那您就按F12检查吧!!!

    展开全文
  • 用flex将内容在div里居中

    千次阅读 2019-01-22 11:07:36
    <!... <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...

    今天在调整ul居中的问题时,遇到了点小困难,以前在使用ul时候,让其不是垂直的排列而是,横着排列都是使用float:left这个属性,但是呢,今天我在弄一些友情链接的时候,就出现了ul在div中居中不了的问题,就是在div中加入了style=“text-align:center;” ul也不居中,最后仔细对比了网上的,发现时用了float:left的原因,首先平铺,可以对ul的style使用display:inline,而不必使用float属性,这样之后在div上就可以使用style=“text-align:center;” 使ul列表居中显示了。

    1、假设最初的的代码是这样:

    <div id="links" style="border:1px solid red;">
    <ul>
        <li><a href="#">link111111</a></li>
        <li><a href="#">link2222</a></li>
        <li><a href="#">link33333</a></li>
        <li><a href="#">link44444</a></li>
        <li><a href="#">link555555</a></li>
    </ul>
    </div>

    显示的效果应该是这样子的


    2、去除列表前面的黑点(在ul的style中使用list-style-type:none;)

    <div id="links" >
    <ul style="border:1px solid red;list-style-type:none;">
        <li><a href="#">link111111</a></li>
        <li><a href="#">link2222</a></li>
        <li><a href="#">link33333</a></li

        <li><a href="#">link44444</a></li>
        <li><a href="#">link555555</a></li>
    </ul>
    </div>

    如下图所示:

    3、使li横排显示并且ul位于div的中间位置,(li使用style="display:inline;"),如下所示

    <style type="text/css">

    #links {text-align:center;}

    #links ul{border:1px solid red;list-style-type:none;}

    #links ul li{
    display:inline;

    }

    </style>

     

    <div id="links" >
    <ul>
        <li><a href="#">link111111</a></li>
        <li><a href="#">link2222</a></li>
        <li><a href="#">link33333</a></li

        <li><a href="#">link44444</a></li>
        <li><a href="#">link555555</a></li>
    </ul>
    </div>

    如下图所示:

    到此为止实现ul中的li横排显示,并且ul在div里居中显示。

    展开全文
  • 该html代码是实现DIV居中及DIV垂直居中的实例,包括: div居中, div内文本居中及垂直居中, div嵌套div并居中, div嵌套div并垂直居中.
  • 首先打开Sublime Text软件,新建一个HTML页面,比如然后准备写一个div用来放内容,可以给div设置边框。...css中如何让div中的文本框居中在body标签前面位置,输入: .one{ width:400px; heighcss,p标签文本在div里...
  • 如何让DIV居中呢?如何让DIV盒子水平居中呢?本节DIVCSS5让大家实现DIV布局水平居中。 一、div居中实现介绍 - TOP 布局一张网页时,通常网页主体框架是居中于浏览器中的。实现最外层DIV水平居中与浏览器中需要一...
  • 最近写网页经常需要将div在屏幕中居中显示,遂记录下几个常用的方法,都比较简单。 水平居中直接加上&amp;lt;center&amp;gt;标签即可,或者设置margin:auto;当然也可以用下面的方法下面说两种屏幕正中...
  • Div上下居中

    2020-10-31 02:28:58
    Div上下居中
  • 提供了div在div居中的多种方式,直接打开文件F12查看样式即可,简单方便。不再只会使用绝对布局
  • DIV 垂直居中

    2011-11-14 21:41:36
    DIV 垂直居中DIV 垂直居中DIV 垂直居中DIV 垂直居中DIV 垂直居中DIV 垂直居中
  • Img是内联元素,要设置其margin属性使其居中,就要将其转换为块元素display:block;然后利用margin:0 auto;...以上就是小编为大家带来的解决img在div居中的问题的全部内容了,希望对大家有所帮助,多多支持软件开发网~
  • 这里的checkbox是没有居中对齐的,网上找了好多方法,起初我想到的是,根据js动态获取父节点的高度然后动态加到checkbox的div上,然后设置行高,后来会出现一直点刷新会出现问题。然后看到知乎大神使用css3的方法...
  • div水平居中的方法

    2018-06-13 10:34:45
    CSS网页布局DIV水平居中的各种方法 CSS网页布局DIV水平居中的各种方法 CSS网页布局DIV水平居中的各种方法 CSS网页布局DIV水平居中的各种方法 CSS网页布局DIV水平居中的各种方法CSS网页布局DIV水平居中的各种方法
  • div居中和div内容居中

    万次阅读 2018-08-27 23:44:46
    一、div自身居中: 使用margin:0 auto 上下为0,左右自适应的css样式。 要让div水平居中,那么除了设置css margin:0 auto外,还不能再设置float,不然将会导致div靠左(设置float:left)和div靠右(设置float:...
  • 主要介绍了Jsp中如何让图片在div居中的小技巧,需要的朋友可以参考下
  • DIV完全居中

    2013-07-02 10:48:06
    html div 完全居中
  • div在div里底部居中

    千次阅读 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中设置文字与内部div垂直居中

    千次阅读 2019-08-09 23:42:04
    在div中设置文字与内部div垂直居中 要实现如图一所示的结果: html代码如下: 复制代码 商品管理后台首页 这是一个测试要居中 我是div中的文字 复制代码 相应的less代码 ...
  • ul如何在DIV居中

    千次阅读 2019-09-25 17:45:53
    ul如何在DIV居中 转载于:https://www.cnblogs.com/qianjilou/p/6561888.html
  • div居中

    千次阅读 2015-05-31 15:43:53
    div居中
  • div在div居中显示问题

    千次阅读 2018-09-11 19:04:28
    div在div居中显示几种css方法 父的div中有一个子的div,让子div在div居中显示。 上代码 1:方法一 这方法最好使,我常用的方法 .parent { width:800px; height:500px; border:2px solid #000; ...
  • 昨夜与群友讨论图片垂直居中时,突然想到与这很相像的DIV垂直居中效果.raozou分享了他的效果代码,今将其整理,特贴下来大家一起分享
  • 基础的css样式居中
  • ul在div居中显示

    千次阅读 2018-10-30 16:05:56
    ul在div居中显示: .nav{ text-align:center; } .nav ul{ display:inline-block; height:15px; vertical-align:top;} .nav ul li{display:inline-block; }
  • div在div垂直居中的最好方法

    千次阅读 2019-04-04 14:14:00
    div在div垂直居中的最好方法 父div设display:flex;align-items:center; 具体的flex弹性布局自行谷歌或百度 此处注明一个以前我一直以为可以垂直居中的使用方法,其实是错误的,如果不信,可以自己自行试一遍...
  • 图片在div居中多种方式

    千次阅读 2016-10-22 13:57:02
    图片在div居中 点击打开链接

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 108,050
精华内容 43,220
关键字:

在div里居中