精华内容
下载资源
问答
  • 最近写网页经常需要将div在屏幕中居中显示,遂记录下几个常用方法,都比较简单。 水平居中直接加上<center>标签即可,或者设置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主体内容屏幕布局居中?一般网页主体无论宽屏还是窄屏幕是居中的,而主体居中关键点是最外层DIV布局居中来实现。...完美让div在屏幕居中CSS代码:body{ text-align:center}#main{ margin:0 ...

    怎么让div主体内容在屏幕中布局居中?

    ed7845d92e2a5055d5e6f889512c09d0.png

    一般网页主体无论宽屏还是窄屏幕是居中的,而主体居中关键点是最外层DIV布局居中来实现。最外层div屏幕中居中了,自然内容在此居中DIV内整体是居中的。

    最外层DIV盒子屏幕中居中,很简单就需要对其设置DIV不使用float浮动属性即可实现布局居中。

    完美让div在屏幕中居中CSS代码:

    body{ text-align:center}

    #main{ margin:0 auto}

    html body内代码:

    完整居中实例DIV CSS代码:

    div主体在屏幕居中

    body{ text-align:center}

    #main{ margin:0 auto; width:300px;border:2px solid #00F}

    看到DIV居中效果,

    设置固定宽度和边框

    效果截图:

    85518029e57ec949702a7584b91b8ff8.png

    无论屏幕大小div始终实现居中

    总结:实际上这篇问题与教程文章,即是让DIV布局居中的实现。

    作者:css5原创

    展开全文
  • 详细内容利用图片margin属性将图片水平居中,利用spanpadding属性将图片垂直居中。结构代码同上;css代码如下:span {width:300px; height:150px; background-color:#eee; padding-top:50px; border:#000 1px ...

    详细内容

    利用图片的margin属性将图片水平居中,利用span的padding属性将图片垂直居中。

    结构代码同上;

    css代码如下:

    span {width:300px; height:150px; background-color:#eee; padding-top:50px; border:#000 1px solid;}

    img {display:block; margin:0 auto;}

    备注:

    img是内联元素,要设置其margin属性使其居中,就要将其转换为块元素display:block;然后利用margin:0 auto;实现图片的水平居中;(有的设计师为图片再加个span标签,然后通过span标签的margin实现居中

    思路:利用text-align属性将图片水平居中,然后设置padding-top的值使其垂直居中。

    结构如下:

    span{

    width:180px;

    height:180px;

    border:1px solid #000;

    position:relative;

    display:table-cell;

    text-align:center;

    vertical-align:middle;

    }

    span p{

    position:static;

    +position:absolute;

    top:50%;

    }

    span img{

    position:static;

    +position:relative;

    top:-50%;

    left:-50%;

    }

    12986229678396.jpg

     

    12986229678396.jpg

    方法二

    tt.gif

    css样式如下:

    span {width:300px; height:150px; background-color:#ccc; border:#000 1px solid; text-align:center; padding-top:50px;}

    展开全文
  • 网页HTML中布局DIV如何任何不同浏览器于任何客户端移动或PC上都是水平居中的。同时如何让div内容居中(文本水平居中)。一、div屏幕中水平居中让DIV水平居中关键CSS代码:margin:0 automargin:0 auto设置div 上下为0...

    网页HTML中布局DIV如何在任何不同浏览器于任何客户端移动或PC上都是水平居中的。同时如何让div内容居中(文本水平居中)。

    一、div屏幕中水平居中

    让DIV水平居中关键CSS代码:margin:0 auto

    margin:0 auto设置div 上下为0,左右为自动(随div设置宽度左右间距自适应左右与左右最边相同)。

    实例完整代码:

    div居中小实例 CSS5

    .ct{ margin:0 auto; width:370px; border:1px solid #000}

    div居中关键设置margin:0 auto

    为了观看到div居中,对div设置边框和宽度。

    92ab2749b7e1c6cc8a05675eae9232e2.png

    div在屏幕中水平居中

    div居中条件:除了设置margin外,不能同时再设置float浮动样式,设置float则会让div靠左或靠右。

    布局屏幕中水平居中关键点:div设置margin:0 auto即可。

    二、div内内容文本水平居中

    有的浏览器默认div内容是居中的,有的是靠左的,对div设置内容居中是有必要的。

    div内容水平居中代码: text-align:center

    完整的DIV水平居中与div内容水平居中示例代码:

    div居中小实例 CSS5

    .ct{ margin:0 auto; width:370px; border:1px solid #000; text-align:center}

    div居中关键设置margin:0 auto

    截图

    8465e9f663c94bbefef59bd11380552b.png

    DIV布局居中与内容居中示例

    div内容居中关键代码:text-align:center

    div在屏幕中居中关键代码:margin:0 auto

    要让div水平居中,DIV布局居中就不能设置float哟。

    作者:CSS5原创

    展开全文
  • 于是任务进行过程,我总结了一套万能图片、文字垂直居中方法,记录这里(脑子不好,为了便于以后使用时理解代码写demo时对所有代码进行了注释) 在线演示:DIV中的图片文字垂直居中Demo 代码说明:...
  • 我们都知道使用margin:auto可以元素水平居中的。 最近写网页经常需要将div在屏幕居中显示,遂记录下几个常用的方法,都比较简单。 水平居中直接加上标签即可,或者设置margin:auto;当然也可以用下面的方法 下面...
  • 当然也可以用下面方法下面说两种屏幕正中(水平居中+垂直居中)方法放上示范的html代码:MAIN方法一:div使用绝对布局,设置margin:auto;并设置top、left、right、bottom值相等即可,不一定要都是0。.main{...
  • 如何使文字div水平和垂直居中的css代码可以用“text-align”属性和“line-height”属性。css如何让div中的文本框居中body标签前面位置,输入: .one{ width:400px; heighcss,p标签文本div里...
  • CSS中的代码是(body{text-align:center;})第二种方式:用盒子模型,首先设置一个Div ,这个DIV的宽度为100%,然后这个DIV居中,那么这个DIV中加的内容就居中显示,代码如下:.div1{text-align:center;width:...
  • 首先要调整,是图片独占一行空间。补充CSS知识点:图像(标签)默认是行内样式(inline ...因此需要把文章内容中的图片样式由行内样式更换为block块级元素,要不就易和文字内容纠缠一起。简单点:block元素将显示...
  • 1、代码是: .slideshow{ width: 780px; height: 420px; } .slideshow ul{ display: table; margin: 0 auto;...其中slideshow为其父盒子...MDNdisplay:table解释为: These elements behave like HTML <table&g
  • 如何将一个固定高度的div居中在屏幕中间呢? 先来看个例子,定义一个div并设置其高度为600px; html代码:<...}让div一直待屏幕中间其实很简单,只需要css代码中加上短短几句.a{ height:600px; ba
  • 在DIV CSS布局页面里,从布局内容到页面里文章文字居中都是非常重要,而css来设置居中也是非常简单。  1、首先介绍使用css属性整体布局的居中:  设置对象父级内容居中,这里一个页面为父级是什么呢?...
  • 记录两种让div框体相对父级框体居中(水平居中+垂直居中两种方法 :先放上示范的HTML代码:&lt;body&gt; &lt;div class="main"&gt; &lt;div class="target"&gt; ...
  • 如何让div水平居中

    2013-05-27 19:16:12
    如何让div水平居中:建议:尽可能的手写代码,可以有效的提高学习效率和深度。让整个div水平居中的使用相当频繁。例如,一般情况下都是让网页页面浏览器水平居中。代码实例: View Code &lt;!DOCTYPE ...
  • 在html5表格标题caption如何居中用CSS控制就可以了。 不过,它默认居中的,一般配合标签使用。写在标签内部。html5怎么设置fieldset居中?就是白色里面的内容显示在页面中间。以下是源代码:html:HTML5,...
  • Dreamweaver(DW)中的div层怎么居中 Dreamweaver中div怎么页面居中?Dreamweaver中div怎么页面居中?我写的DIV都是靠左,怎么它页面居中.header样式加入margin:0px auto;DW如何设置网页打开绝对居中body...
  • CSS布局实例,这个例子相信很实用,一个图片在Div容器上下、左右都居中,也就是水平和垂直都居中,有用吧,平时遇到机率挺高,下面结合CSS和HTML来实现这个演示,请参见代码:  测试效果如下:可...
  • 但是如何让div在页面上以水平或者垂直方式居中呢? 1.div水平居中  div水平居中其实很简单,只要使用到margin中的auto就能实现。代码如下: <html> <head> <title>div水平居中</...
  • #解决给父级div设置padding子级元素居中的问题 做网页过程,我们常常会遇到子级块状div居中的问题,如下图 代码 <!doctype html> <html> <head> <meta charset="utf-8"> ...
  • 该方法是将外部容器显示模式设置成display:table,img标签外部再嵌套一个span标签,并设置span显示模式为display:table-cell,这样就可以很方便使用vertical-align象表格元素那样对齐了,当然这只是标准...
  • div垂直居中 css div盒子上下垂直居中,让DIV盒子任何浏览器任何分辨率显示屏浏览器处于水平居中和上下垂直居中。 div垂直居中常用于单个盒子,如一个页面里只有一个登录布局,使用div css让这个登录布局...
  • CSS布局实例,这个例子相信很实用,一个图片在Div容器上下、左右都居中,也就是水平和垂直都居中,有用吧,平时遇到机率挺高,下面结合CSS和HTML来实现这个演示,请参见代码div{border:1px solid #ccc;...

空空如也

空空如也

1 2 3 4 5 6
收藏数 120
精华内容 48
关键字:

在html中让div居中的代码