精华内容
下载资源
问答
  • div居中和div内容居中

    万次阅读 多人点赞 2018-08-27 23:44:46
    让div水平居中,那么除了设置css margin:0 auto外,还不能再设置float,不然将会导致div靠左(设置float:left)和div靠右(设置float:right)。 1、div布局居中实例代码 <!DOCTYPE html> <...

    一、div自身居中:

    使用margin:0 auto
    上下为0,左右自适应的css样式。

    要让div水平居中,那么除了设置css margin:0 auto外,还不能再设置float,不然将会导致div靠左(设置float:left)和div靠右(设置float:right)。

    1、div布局居中实例代码

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>div布局居中实例 thinkcss</title>
    <style>
    #jz{ margin:0 auto; width:320px; height:100px; border:1px solid #F00}
    </style>
    </head>
    <body>
    <div id="jz">设置margin:0 auto兼容各大浏览器让div水平居中</div>
    </body>
    </html>

    2、截图
    这里写图片描述
    div盒子水平居中截图

    以上实例正是使用margin:0 auto让div兼容各大浏览器的水平居中。

    二、div内的内容居中:

    内容居中分为div内容水平居中与div内容垂直居中。

    div内容水平居中相比布局div居中,而div内容居中比较简单,只需要设置一个内容居中css(text-align:center)、内容垂直居中(line-height)即可。

    1、div内容水平居中CSS:
    text-align:center
    无论是p还是div都可以对其设置此CSS实现对应对象内的内容水平居中。

    2、div内容垂直居中 行高属性:
    line-height
    要让div内只有一行的内容垂直居中,通常对div设置的height(高)与line-height(行高)相同,即可实现div内容垂直居中。

    3、div内容水平居中与垂直居中实例代码

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>div内容居中实例 thinkcss</title>
    <style>
    #juzhong{width:320px;height:100px; line-height:100px; text-align:center; border:1px solid #F00}
    </style>
    </head>
    <body>
    <div id="juzhong">text-align和line-height设置水平与垂直居中</div>
    </body>
    </html>

    4、截图
    这里写图片描述
    div内容水平居中与div内容垂直居中布局实例

    从上图可以看见div内容实现两者情况下居中,但没有设置margin:0 auto而div没有水平居中。

    可以实例下再将以上代码拷贝后,加入DIV布局居中代码试试实现DIV的居中。

    展开全文
  • 设置div内容居中

    千次阅读 2018-04-11 21:48:59
    最近实习,就把前端里的一些方式做个笔记,方便大家一起交流学习。首先,我们要先明确自己是不是使用了绝对定位:position:absolute;...这里(2)left和top都是50%,这在水平方向上让div的最左与屏幕的...

         最近实习,就把前端里的一些方式做个笔记,方便大家一起交流学习。首先,我们要先明确自己是不是使用了绝对定位:position:absolute; 如果是,那么我们可以采用以下两种方式:

    (1)div使用绝对布局,设置margin:auto;并设置top、left、right、bottom的值相等即可,不一定要都是0;这里

    (2)让left和top都是50%,这在水平方向上让div的最左与屏幕的最左相距50%,垂直方向上一样,所以再用transform向左(上)平移它自己宽度(高度)的50%,就可达到居中效果了。

    eg:(main包含div cotent)

    .main{
    position: absolute;
    margin: auto;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        height: 80%;
    width:  80%;
    background-color: lightskyblue;
    }


    .cotent{
    position: absolute;
    margin: auto;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    /*margin: 0 auto;*/
        height: 440px;

       width: 870px;

    background-color: lightskyblue;

    }

    更多的可以参考:https://segmentfault.com/a/1190000002436755


    展开全文
  • 该html代码是实现DIV居中及DIV垂直居中的实例,包括: div居中, div内文本居中及垂直居中, div嵌套div并居中, div嵌套div并垂直居中.
  • 有时我们会有这样的需求就是让div整体居中内容居中,下面有个不错的示例,大家可以参考下
  • 主要介绍了Jsp中如何图片在div居中的小技巧,需要的朋友可以参考下
  • 主要介绍了浮动的div自适应居中显示的js代码,有需要的朋友可以参考一下
  • 如何让DIV居中呢?如何DIV盒子水平居中呢?本节DIVCSS5大家实现DIV布局水平居中。 一、div居中实现介绍 - TOP 在布局一张网页时,通常网页主体框架是居中于浏览器中的。实现最外层DIV水平居中与浏览器中需要一...

    DIV 居中之div水平居中 让DIV布局居中篇

    如何让DIV居中呢?如何让DIV盒子水平居中呢?本节DIVCSS5让大家实现DIV布局水平居中。

    一、div居中实现介绍   -   TOP

    在布局一张网页时,通常网页主体框架是居中于浏览器中的。实现最外层DIV水平居中与浏览器中需要一个条件和一个设置。

    假如最外层DIV盒子CSS命名为“#divcss5”,这个时候为了兼容各大浏览器实现最外层的这个盒子居中。

    一条件:
    这个时候对“body”设置css内容居中样式(text-align:center)

    CSS代码

    1. body{text-align:center} 

    一设置:

    这个时候对“#divcss5”设置居中必备样式css margin
    即CSS代码:

    1. #divcss5{margin:0 auto} 

    二、DIV居中用法实例   -   TOP

    为了便于观察布局居中效果,我们再对“#divcss5”加一个css边框为黑色,css宽度为300px;高度为100px样式。

    1、最终得到DIV居中的CSS代码:

    1. body{ text-align:center} 
    2. #divcss5{margin:0 auto;border:1px solid #000;width:300px;height:100px} 

    2、对应html代码片段:

    1. <div id="divcss5">DIV水平居中案例</div

    3、居中案例截图

    实现div居中实例截图
    DIV水平居中效果图

    4、在线演示:查看案例

    转载于:https://www.cnblogs.com/ylei11/p/10459575.html

    展开全文
  • CSS中让DIV居中的代码

    2020-12-13 10:08:26
    CSS 如何使DIV层水平居中 今天用CSS碰到个很棘手的问题,DIV本身没有定义自己居中的属性, 网上很多的方法都是介绍用上级的text-align: center然后嵌套一层DIV来解决问题. 可是事实上这样的方法科学吗? 经过网络搜索和...
  • DIV CSS布局的页面里,从布局内容到页面里文章文字居中都是非常重要的,而css来设置居中也是非常简单的。  1、首先介绍使用css属性整体布局的居中:  设置对象的父级内容居中,这里一个页面的为父级是什么呢?...
  • 让div水平居中的css方法

    万次阅读 多人点赞 2018-01-02 19:42:23
    一:让div水平居中的css方法:(默认情况下div的display为block,以下是针对display:block来说的) 1、给要设置水平居中div设置display:block ,margin:0 auto,width , height4个属性,可以块级元素水平居中...

    一:让div水平居中的css方法:(默认情况下div的display为block,以下是针对display:block来说的)

    1、给要设置水平居中的div设置display:block  ,margin:0 auto,width   ,  height4个属性,可以让块级元素水平居中(默认情况下,div的position:static)

    <!DOCTYPE html>
    <html>
    <head>
    	<title>test</title>
    	<meta charset="utf-8" />
    	<style>
    		div{
    		    width:200px;
    		    height:200px;
    		    background-color:red;
    		    display: block;
    		    margin:0 auto;
    		}
    	</style>
    </head>
    <body>
     <div></div>
    </body>
    </html>

    显示的效果:



    2、给要水平居中的div设置属性:width    height      position       left      margin-left     

        其中left:50%            position:的值除了static之外的都可以           marin-left:的值为负数,数值大小为width的一半

    <!DOCTYPE html>
    <html>
    <head>
    	<title>test</title>
    	<meta charset="utf-8" />
    	<style>
    		div{
    			position:relative;
    			left:50%;
    			width:400px;
    			height:400px;
    			margin-left:-200px;
    		        background-color:red;
    		        display: block;
    		    
    		}
    	</style>
    </head>
    <body>
     <div></div>
    </body>
    </html>


    二、让div竖直居中的css方法:(默认情况下div的display为block,以下是针对display:block来说的)

    1、给要竖直居中的div设置属性:width    height      position       top     margin-top

     top:50%          margin-top:为负值,值大小为height的一半                 position为absolute或者fixed   

    <!DOCTYPE html>
    <html>
    <head>
    	<title>test</title>
    	<meta charset="utf-8" />
    	<style>
    		div{
    			    position: absolute;
    			    top: 50%;
    			    width: 400px;
    			    height: 500px;
    			    margin-top: -250px;
    			    background-color: red;
    			    display: block; 
    		}
    	</style>
    </head>
    <body>
     <div></div>
    </body>
    </html>


    三、让div同时水平竖直居中的方法

    1、同时水平竖直居中的div设置属性:width    height      position       top     margin-top     left      margin-left

         top:50%   left:50%     position:absolute/fixed           margin-top:-height/2                 margin-left:-width/2

    <!DOCTYPE html>
    <html>
    <head>
    	<title>test</title>
    	<meta charset="utf-8" />
    	<style>
    		div{
    			    position: absolute;
    			    top: 50%;
    			    left: 50%;
    			    width: 400px;
    			    height: 500px;
    			    margin-top: -250px;
    			    margin-left: -200px;
    			    background-color: red;
    			    display: block; 
    		}
    	</style>
    </head>
    <body>
     <div></div>
    </body>
    </html>


    2、给要水平居中的div设置属性:width    height      position       left      margin-left     
    展开全文
  • 不过,还是经常会有人问到这个问题,在这里我简单总结一下使用Div和CSS实现页面水平居中的方法: 一、margin:auto 0 与 text-aligh:center 在现代浏览器(如Internet Explorer 7、Firefox、Opera等)现代浏览器实现...
  • DIV和SPAN如何垂直居中对齐,水平居中很简单,设置text-align:center就可以了,垂直居中一直很是疑惑,下面为大家解惑
  • 在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?... 相关教程:div水平居中的N种方法 一、单行垂直居中 如果一个容器中只有一行文字,对它实现居中相对比较简单,我们只需要
  • 如何让div实现居中效果

    万次阅读 多人点赞 2019-08-25 15:55:32
    方法一:常见的居中方法,定位 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> /*常见的居中:定位方法*...
  • 复制代码代码如下: div { position:absolute; width:500px; height:260px; top:50%; left:50%; margin-left:-250px; height:-130px; z-index:1000; } 文字居中:text-align:center; height:22px;line-height:22px;...
  • html中div内容居中的方法

    万次阅读 2017-03-27 09:46:30
    方法1:table-celldiv中的内容居中:不改变盒子尺寸。<!DOCTYPE html> <title>Title div { background-color: red; widt
  • 在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中的确是有vertical-align属性,...
  • div水平居中的方法

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

    千次阅读 2019-09-11 13:31:37
    三种让div居中的方式 写在前面:div居中于屏幕中间有很多种方式,这里就记录下 学习的时候的三种方式 毕竟面试题问的多!! 1.宽度和高度已知的 <!DOCTYPE html> <html lang="en"> <head> <...
  • 主要介绍了使用css实现的div水平、垂直居中并且兼容chrome、ie8,具体示例如下,需要的朋友可以参考下
  • flex布局怎样让div居中

    千次阅读 2019-08-24 17:07:46
    用flex布局可以让div或者其他元素居中 请看代码 可以设置div的display属性为flex,然后设置align-items:center; justify-content:center;即可居中 <!DOCTYPE html> <html lang="en"> <head> ...
  • 提供了divdiv居中的多种方式,直接打开文件F12查看样式即可,简单方便。不再只会使用绝对布局
  • 接下来将介绍下:div垂直居中的N种方法包括:单行垂直居中/多行未知高度文字的垂直居中/多行文本固定高度的居中/在InternetExplorer中的解决方案等等感兴趣的你可不要错过了哈,或许本文所提供的方法对你有所帮助
  • flex布局实现div内容居中

    千次阅读 2018-12-24 15:17:35
    div class="list-col-detail"&gt;1002&lt;/div&gt; .list-col-detail{ width: 180px; height: 78px; display: flex; align-items: center; justify-content: center; background: #ff...
  • 不用float实现div模块居中布局
  • div中多行文字垂直居中
  • CSS让DIV上下左右居中的方法

    千次阅读 2019-06-19 10:31:10
    其上下左右居中。 1、使用varticle-align属性 理念: 利用表格单元格的居中属性。 步骤: (1)父div外层配置一个div,同时设置为表格元素 (display: table),宽度为100%。 (2)父div配置为表格单元格元素 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 106,317
精华内容 42,526
关键字:

如何让div内容居中