精华内容
下载资源
问答
  • 最近写网页经常需要将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
    展开全文
  • CSS让DIV居中代码

    2020-12-13 10:08:26
    CSS 如何使DIV层水平居中 今天用CSS碰到个很棘手的问题,DIV本身...经过这么一番设置问题似乎解决了,在FF已经居中了,可是在IE中看竟然还是没有居中! 郁闷了一下午,就是找不出问题所在,还特地比较了网上的文章竟然一模
  • RelativeLayout 代码控制居中

    千次阅读 2015-02-12 11:10:48
    相对布局视图居中代码控制 ProgressBar progressBar = new ProgressBar(mContext); RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(100, 100);// 这里改成DP值 layoutParams.add...
    相对布局视图居中,代码控制
    ProgressBar progressBar = new ProgressBar(mContext);
    RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(100, 100);// 这里改成DP值
    layoutParams.addRule(RelativeLayout.CENTER_IN_PARENT);
    ((ViewGroup) mContainView).addView(progressBar, 0, layoutParams);

    展开全文
  • jquery图片居中放大代码是一款基于jquery实现的鼠标悬停图片居中放大展示代码
  • div代码居中 上下居中 左右居中

    千次阅读 2013-10-31 10:16:24
    精简后的代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ; charset=gb2312" /> <title>Universal vertical ...

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>Universal vertical center with css</title>
    <style>
    #outer {
    height:300px;
    width:300px;
    overflow:hidden;
    position:relative;
    text-align:center;
    }
    #outer[id]{
    display:table;
    position:static;
    }
    #middle{
    position:absolute;
    top:50%;
    }
    /* for explorer only*/
    #middle[id]{
    display:table-cell;
    vertical-align:middle;
    position:static;
    }
    #inner{
    position:relative;
    top:50%;
    }
    /* for explorer only*/
    /* optional : #inner[id] {position:static}*/
    .withBorder{
    border:1px green solid;
    }
    </style>
    </head>

    <body>
    <div id="outer" class="withBorder">
    <div id="middle">
    <div id="inner">
    <img src="http://blog.163.com/lixiaofengfly@126/blog/image/guest_test_icon2.jpg"/>
    <!-- any text any height any content,
    everthing is vertically centered.
    或者文字也可以
    只需要设置 outer 的 高度 宽度 就可以得到想要的效果了
    其他... 复制!
    -->
    </div>
    </div>
    </div>
    </body>
    </html>



    精简后的代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>Universal vertical center with css</title>
    <style>

    #outer {
    height:300px;
    width:300px;
    display:table-cell;
    vertical-align:middle;/*火狐,chrom垂直居中*/
    line-height:300px; /*IE7垂直居中*/
    text-align:center; /*水平居中*/
    }
    .withBorder{
    border:1px green solid;
    }
    </style>
    </head>

    <body>
    <div id="outer" class="withBorder">
    <img src="http://blog.163.com/lixiaofengfly@126/blog/image/guest_test_icon2.jpg"/>
    </div>
    </body>
    </html>

    展开全文
  • div居中代码 DIV水平居中显示CSS代码

    千次阅读 2015-04-27 09:19:31
    需要的主要css代码有两个,一个为text-align:center(内容居中),另外一个为margin:0 auto;其两个样式需要配合使用才能实现div盒子的居中显示排版。 首先我们对body设置text-align:center,再对需要居中的div...

    需要的主要css代码有两个,一个为text-align:center(内容居中),另外一个为margin:0 auto;其两个样式需要配合使用才能实现div盒子的居中显示排版。

    首先我们对body设置text-align:center,再对需要居中的div盒子设置css样式margin:0 auto,这样即可让对应div水平居中。

    实例讲解div居中代码应用,为了观察div居中效果,我们对div设置一个div命名为“.div”在html中div标签内使用class=“div”,设置其宽度为400px;高度为100px,边框为红色。以便我们观察效果。

    展开全文
  • 网页上的点击弹出层代码居中显示 点击弹出居中的遮罩层代码
  • 详细内容html里文字居中代码怎么写?下面本篇文章给大家介绍一下。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。文字水平居中水平居中.box {width: 300px;height: 200px;background: ...
  • 代码中设置某控件居中

    千次阅读 2016-01-22 19:37:55
    因项目需求,布局是动态的,没法在Xml写死,但是,写的过程发现某些Xml的属性在代码中无法配置,比如我想让某一控件居中显示时可以用: RelativeLayout.LayoutParams params=new LayoutParams(LayoutParams....
  • 简单代码实现控件水平居中,里面有详细备注说明
  • excel单元格所有图片自动居中代码。谢谢各位观众老爷的路过
  • html图片居中方法代码,通过在html实现文字居中图片居中篇�?a href="//www.css5.com.cn/html/">html实现文字图片内容居中有三种方法,其中两种使�?a href="//www.css5.com.cn/">CSS样式实现,一直使用...
  • Spinner在代码中设置文字居中

    千次阅读 2018-09-27 11:28:52
    如果ArrayAdapter使用了simple_spinner_item.xml布局 ArrayAdapter&amp;lt;String&amp;gt; dataAdapter = new ArrayAdapter&amp;...(this, android.R.layout.simple_spinner_item, data) { ...
  • 在html如何使div在页面中居中显示

    万次阅读 多人点赞 2019-02-28 13:40:41
    在html如何使div在页面中居中显示 最近无聊又再温习了下html,发现好多东西都忘了。尝试着写了一个html网页,结果就连div如何在页面中居中显示都查了好久才弄出来。其实我不知道为什么这样可以实现,因为css还没...
  • 作为一个前端小猴子,不管是面试的时候还是工作,我们都会或多或少的遇到“使用css居中”的效果,今天就写一篇关于css垂直水平居中的几种方法。 栗子1:从最简单的水平居中开始 margin: 0 auto; 块级元素使用...
  •  上图:黑色为body,深绿色需要在body水平居中,并且宽度是自适应的。亮绿色,是一个多余的DIV,就是为了让深绿色的DIV水平居中。  以下是实现代码:  pos元素的float:left或都用position:absolute;都可以...
  • 壁纸居中代码

    2014-12-16 15:37:52
    小米手机的修改方式
  • DIV始终居中的js代码

    2020-10-26 06:49:47
    主要介绍了DIV始终居中的js代码,需要的朋友可以参考下
  • jquery实现垂直居中显示特效代码
  • div层居中代码下载

    2008-11-05 16:34:23
    如何让DIV居中,这里有源代码。 许多朋友都不清楚DIV如何让它居中,其实很简单! 如果是对页面所有DIV居中,就写在BODY的CSS; 如果是针对特定的DIV,就写在该DIV的CSS
  • js 页面左右两侧居中广告代码,里面的代码还不错
  • 有时我们会有这样的需求就是让div整体居中且内容不居中,下面有个不错的示例,大家可以参考下
  • 分别是登录前的状态,和登录后的状态,LinearLayout背景颜色和高度需要改变,LinearLayout布局的TextView字体需要改变,ImageView控件要改变,原来是居中显示的,那么改变控件后,还想要居中,只需要在xml设置...
  • jquery图片居中放大代码是一款基于jquery实现的鼠标悬停图片居中放大展示代码
  • 代码: <html> <head> <style type="text/css"> /*页面通用样式*/ body { background:#fff; } /*div 水平居中*/ .div1{ margin:0 auto; text-align:center; height:80px; width:500px; ...
  • sublime下让代码居中

    千次阅读 2017-03-19 21:15:00
    sublime在默认情况下当屏幕写满后只能在底端进行输入,对于我这种强迫症患者来说总想着让代码居中显示,在自己查阅相关sublime配置后进行改动。 点击:preference → setting,进入设置界面: 设置界面都是以代码...
  • 垂直居中对齐的核心代码如下: 复制代码代码如下: .elment{ position:relative; top:50%; transform:translateY(-50%); } 具体参见如下案例,利用less将居中对齐的代码携程mixins。 html 复制代码代码如下: ”...
  • div的文字居中代码

    千次阅读 2012-12-26 16:22:31
    <!-- #center {text-align:center; vertical-align:middle; height:200px; line-height:200px; width:400px; border:#000000 dotted 1px} ... 居中 #center{ text-align:center;
  • 登录页面居中示例代码

    千次阅读 2018-08-16 17:31:42
    登录页面居中示例代码 &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 200,499
精华内容 80,199
关键字:

代码中的居中