精华内容
下载资源
问答
  • 如何让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

    展开全文
  • div居中和div内容居中

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

    一、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整体居中内容居中,下面有个不错的示例,大家可以参考下
  • 该html代码是实现DIV居中及DIV垂直居中的实例,包括: div居中, div内文本居中及垂直居中, div嵌套div并居中, div嵌套div并垂直居中.
  • 最近写网页经常需要将div在屏幕中居中显示,遂记录下几个常用的方法,都比较简单。 水平居中直接加上&amp;lt;center&amp;gt;标签即可,或者设置margin:auto;当然也可以用下面的方法下面说两种在屏幕正中...

    最近写网页经常需要将div在屏幕中居中显示,遂记录下几个常用的方法,都比较简单。
    水平居中直接加上<center>标签即可,或者设置margin:auto;当然也可以用下面的方法

    下面说两种在屏幕正中(水平居中+垂直居中)的方法
    放上示范的html代码:

    <body>
    	<div class="main">
    		<h1>MAIN</h1>
    	</div>
    </body>
    
    • 方法一:

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

    .main{
    	text-align: center; /*让div内部文字居中*/
    	background-color: #fff;
    	border-radius: 20px;
    	width: 300px;
    	height: 350px;
    	margin: auto;
    	position: absolute;
    	top: 0;
    	left: 0;
    	right: 0;
    	bottom: 0;
    }
    

    效果如图:
    这里写图片描述

    • 方法二:
      仍然是绝对布局,让left和top都是50%,这在水平方向上让div的最左与屏幕的最左相距50%,垂直方向上一样,所以再用transform向左(上)平移它自己宽度(高度)的50%,也就达到居中效果了,效果图和上方相同。
     .main{
    	text-align: center;
    	background-color: #fff;
    	border-radius: 20px;
    	width: 300px;
    	height: 350px;
    	position: absolute;
    	left: 50%;
    	top: 50%;
    	transform: translate(-50%,-50%);
    }
    
    • 方法三:
      对于水平居中,可以使用最简单的<center>标签,不过已经过时了,用法如下:
    <p><center>123</center></p>
    

    这个<center>标签就是相对于<p>标签里的文字,可以使其居中。

    由于center标签已经过时了,所以正规一点的话还是不建议使用的,可以使用如下的方式代替:

    <p style="text-align:center;">123</p>
    


    欢迎大家加入QQ群一起交流讨论, 「吟游」程序人生——YinyouPoet
    展开全文
  • 让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上下居中

    2020-10-31 02:28:58
    Div上下居中
  • 设置div内容居中

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

    2011-11-14 21:41:36
    DIV 垂直居中DIV 垂直居中DIV 垂直居中DIV 垂直居中DIV 垂直居中DIV 垂直居中
  • 怎样bootstrap中div水平居中 怎样bootstrap中div水平居中 怎样bootstrap中div水平居中 怎样bootstrap中div水平居中 怎样bootstrap中div水平居中 怎样bootstrap中div水平居中 怎样bootstrap中div水平...
  • div内容居中显示

    千次阅读 2010-09-17 06:13:00
    DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> 多行文字实现垂直居中 </title> ;...
  • css div 文字 内容 居中

    千次阅读 2019-08-14 21:14:05
    css div 文字 内容 居中 .选择器{  text-align:center; }
  • 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...
  • div水平居中的方法

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

    万次阅读 2017-03-27 09:46:30
    方法1:table-celldiv中的内容居中:不改变盒子尺寸。<!DOCTYPE html> <title>Title div { background-color: red; widt
  • DIV完全居中

    2013-07-02 10:48:06
    html div 完全居中
  • DIV中的DIV居中显示

    千次阅读 2017-12-16 10:33:02
    发现前端div中的div不是居中显示的,网上说将父级DIV设置为text-align:center 子级设置为margin:0 auto,但是我试了下无效,不知道为什么。后来换了一种方法, 父级Divdisplay: flex; align-items: center; 子级...
  • css让div永远居中

    千次阅读 2011-11-20 09:57:31
    在网上看了很多, 让div居中,有设置 float:center,text-align:center的方式,但都不够完美。 当然,我这个方法,也是在网上搜到的,只是详细说明一下每一个css属性的含义而已。 .divCenter { position:...
  • 如何让div实现居中效果

    万次阅读 多人点赞 2019-08-25 15:55:32
    方法一:常见的居中方法,定位 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> /*常见的居中:定位方法*...
  • 首先给div本身设置相对定位、绝对定位、固定定位 1、上下居中 top:50%;margin-top:-(本身高度*50%) 2、左右居中 left:50%;margin-left:-(本身宽度*50%)
  • div内容垂直居中对齐

    千次阅读 2016-03-25 02:44:30
    css垂直居中属性设置vertical-align: middle对div不起作用,例如: DIV垂直居中对齐 * { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; } body {text-align: center; vertical-...
  • 昨夜与群友讨论图片垂直居中时,突然想到与这很相像的DIV垂直居中效果.raozou分享了他的效果代码,今将其整理,特贴下来大家一起分享
  • div内容垂直居中

    千次阅读 2012-12-03 14:07:12
    虽然Div布局已经基本上取代了表格布局,但表格布局和Div布局仍然...如何让div中的内容垂直居中 来源:黄超 [点击放大] 要让div中的内容垂直居中,无非有以下几种方法,等我一一列举: 一、行高(line-heig
  • div居中

    千次阅读 2015-05-31 15:43:53
    div居中
  • 主要介绍了Jsp中如何图片在div居中的小技巧,需要的朋友可以参考下
  • css让div居中

    千次阅读 2019-06-12 12:03:02
    html中div标签默认是占一整行的,如果需要设置指定大小并且还要居中,最简单的方式是设置margin值(这里是水平居中) <!DOCTYPE html> <html lang="zh"> <head> <style> .test{ width:...
  • 关于网页设计制作(布局)过程中,如果让内容居中,分为以下几种情况:1、文本,图片等内联元素的水平居中。text-align:center2、定宽的块状元素在浏览器窗口或父容器中水平居中。margin:0 auto3、不定宽块状元素...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 107,683
精华内容 43,073
关键字:

怎么让div内容居中