精华内容
下载资源
问答
  • CSS让DIV居中的代码

    2020-12-13 10:08:26
    CSS 如何使DIV层水平居中 今天用CSS碰到个很棘手问题,DIV本身...经过这么一番设置问题似乎解决了,在FF已经居中了,可是在IE中看竟然还是没有居中! 郁闷了一下午,就是找不出问题所在,还特地比较了网上文章竟然一模
  • 最近写网页经常需要将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
    展开全文
  • 在页面布局时,经常会用到li标签,它可用于列表,导航,选项卡等等,那你知道如何让ul中的li居中吗?这篇文章就和大家讲讲如何让ul中的li水平居中以及如何让li内容垂直居中。感兴趣的朋友继续往下看吧。web前端学习...

    在页面布局时,经常会用到li标签,它可用于列表,导航,选项卡等等,那你知道如何让ul中的li居中吗?这篇文章就和大家讲讲如何让ul中的li水平居中以及如何让li内容垂直居中。感兴趣的朋友继续往下看吧。

    web前端学习:打造全网web前端全栈资料库(总目录)看完学的更快,掌握的更加牢固,你值得拥有(持续更新)zhuanlan.zhihu.com

    1、li内容垂直居中

    flex-direction 属性规定灵活项目的方向。当设置它的属性值为column时,表示灵活的项目将垂直显示,正如一个列一样。justify-content 用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式,当设置其属性值为center时,表示项目位于容器的中心。这样就可以实现ul中li内容的垂直居中。代码如下:

    HTML部分:

    <div class="box">
     <ul>
     <li>aa</li>
     <li>bb</li>
     <li>cc</li>
     <li>dd</li>
     </ul>
    </div>

    CSS部分:

    <style type="text/css">
     .box{
     width: 300px;
     height: 300px;
     border: 1px solid red;
     }
     .box ul{
     height: 300px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     }
      
     .box ul li{
     list-style: none;
     margin: 0 auto;
     }
    </style>

    效果图:

    07a8ca02e4f9b53da98cf081e797337b.png

    2、li内容水平居中

    flex-direction 属性规定灵活项目的方向。当设置它的属性值为row时(默认值),表示灵活的项目将水平显示,正如一个行一样。 justify-content 用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式,当设置其属性值为center时,表示项目位于容器的中心。这样就可以实现ul中li内容的水平居中。代码如下:

    HTML部分:

    <div class="box">
     <ul>
     <li>今天心情不错</li>
     <li>今天心情不错</li>
     <li>今天心情不错</li>
     <li>今天心情不错</li>
     </ul>
    </div>

    CSS部分:

    <style type="text/css">
     .box{
     width: 100%;
     height: 200px;
     border: 1px solid #000;
     }
     .box ul{
     height: 200px;
     display: flex;
     flex-direction: row;
     justify-content: center;
     }
     .box ul li{
     list-style: none;
     height: 200px;
     line-height: 200px;
     }
    </style>

    效果图:

    72e6ee3eb2a5f4d27611f9abc9df80b2.png

    总结:以上介绍了ul中li标签内容居中的方法,如果是垂直居中,就用 flex-direction: column;如果是水平居中,就用flex-direction: row;不了解的小伙伴,可以自己动手尝试,看看你能不能实现li内容居中的效果,希望这个教程可以帮助到你!

    以上就是图文详解ul中li内容垂直居中和水平居中的方法的详细内容,更多请关注我哦!!!!!!

    展开全文
  • 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;
    
    
      
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head> 
      <title>居中</title>
     <style>
      
     #center{
     text-align:center;
     vertical-align:middle;
     height:200px;
     line-height:200px;
     width:400px;
     border:#000000 dotted 1px;
     }
    	
     </style>
    </head>
    
    <body> 
    <div id="center">hello,i am center</div>
    </body>
    </html>


    height和line-heigt的值相同的话就是在div中垂直居中了。再加上text-aign:center是水平居中。

     

    来看看效果吧:

    hello,i am center

    展开全文
  • 代码中设置布局居中,翻看api可以知道view中有setGravity,setPadding,但是没有直接setLayoutGravity,setMargin等方法。下面将在代码中实现类似布局中layout_gravity,layout_margin方法。可以通过设置view...

    在代码中设置布局居中,翻看api可以知道view中有setGravity,setPadding,但是没有直接的setLayoutGravity,setMargin等方法。下面将在代码中实现类似布局中layout_gravity,layout_margin的方法。

    可以通过设置view里面的LayoutParams 设置,而这个LayoutParams是根据该view在不同的GroupView而不同的。

    1、代码中设置layout_gravity

    LinearLayout layoutTop=(LinearLayout) findViewById(R.id.layout_top);

    FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(layoutTop.getLayoutParams());

    params.gravity = Gravity.CENTER_VERTICAL;

    layoutTop.setLayoutParams(params);

    这里的FrameLayout、LinearLayout是说明该view在一个FrameLayout或LinearLayout里面,具体得看自己的布局,这个地方有可能会报错,比如图中这样的错误。错误很明显,这也很好解决,只需要按照提示将属性改为相应的即可。

    ce0a5f3899c7cb25c9467800990c1d24.png

    2、代码中设置layout_margin

    ImageView image = (ImageView) findViewById(R.id.img_icon);

    LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(image.getLayoutParams());

    lp.setMargins(10, 20, 0, 0);

    image.setLayoutParams(lp);该方法可以封装为:

    public static void setMargins (View view, int left, int top, int right, int bottom) {

    if (view.getLayoutParams() instanceof ViewGroup.MarginLayoutParams) {

    ViewGroup.MarginLayoutParams p = (ViewGroup.MarginLayoutParams) view.getLayoutParams();

    p.setMargins(left, top, right, bottom);

    view.requestLayout();

    }

    }

    展开全文
  • 代码中设置某控件居中

    千次阅读 2016-01-22 19:37:55
    因项目需求,布局是动态的,没法在Xml中写死,但是,写的过程中发现某些Xml中的属性在代码中无法配置,比如我想让某一控件居中显示时可以用: RelativeLayout.LayoutParams params=new LayoutParams(LayoutParams....
  • 本篇文章主要介绍了如何去写关于html文字居中代码。...​zhuanlan.zhihu.comhtml文字居中代码具体示例如下:<!DOCTYPE HTML> <html lang="en"> <head> <title>html文字居中测试</title...
  •  上图:黑色为body,深绿色需要在body水平居中,并且宽度是自适应。亮绿色,是一个多余DIV,就是为了让深绿色DIV水平居中。  以下是实现代码:  pos元素float:left或都用position:absolute;都可以...
  • 作为一个前端小猴子,不管是面试时候还是工作,我们都会或多或少遇到“使用css居中效果,今天就写一篇关于css垂直水平居中的几种方法。 栗子1:从最简单水平居中开始 margin: 0 auto; 块级元素使用...
  • // Table column中显示居中的实现 // QpriceResultTable1 为...// noPrice 为table中的列 OATableBean table = (OATableBean)webBean.findChildRecursive("QpriceResultTable1"); table.prepareForRendering(p...
  • text-align是用于设置或对象文本对齐方式。一般情况下我们设置文本对齐方式时候需要用此属性进行设置,如: Example Source Code [www.52css.com]  div { text-align: left; } 表示文本居左对齐。  ...
  • 垂直居中对齐在网页布局非常实用,下面有段css代码,个人感觉还不错,大家可以参考下
  • 本章节介绍一下如何实现未知宽高元素在指定元素下实现垂直水平居中效果,代码简单易懂,需要朋友可以参考下本
  • img在div垂直居中的代码

    千次阅读 2012-01-04 13:00:39
  • 主要介绍了jQuery封装屏幕居中提示信息代码,可以很方便集成到项目开发使用,涉及jQuery针对页面元素动态操作技巧,需要朋友可以参考下
  • CSS使用text-align、margin:0 auto居中
  • CSS中的居中

    2018-04-25 21:30:47
    我们在实际工作常会遇到需要设置水平居中的场景,比如为了美观,文章标题一般都是水平居中显示。这里我们又得分两种情况:行内元素 还是 块状元素 ,块状元素又分为定宽块状元素,以及不定宽块状元素 ; 1 . ...
  • 智慧大石你设一下字体行高为30px就行了,line-height:30px。CSS(层叠样式表)是一种用来表现HTML或XML等文件样式...CSS具有精简代码,降低重构难度、提升网页访问速度、利于SEO优化等优势,能够对网页元素位置...
  • 一、记录下几种盒子居中的方法: 1、margin固定宽高居; 2、负margin居中; 3、绝对定位居中; 4、table-cell居中; 5、flex居中; 6、transform居中; 7、不确定宽高居(绝对定位百分数); 8、button...
  • ,就能轻松解决掉水平居中的问题,但一直以来最麻烦对齐问题,都是“垂直居中”这个讨人厌设定,以下将介绍五种单纯利用CSS垂直居中的方法。方法1:设定行高(line-height)设定行高是垂直居中最简单...
  • 你设一下字体行高为30px就行了,line-height:30px。CSS(层叠样式表)是一种用来表现HTML或XML等文件样式...CSS具有精简代码,降低重构难度、提升网页访问速度、利于SEO优化等优势,能够对网页元素位置排版进行...
  • Markdown 的预览可以通过CSS实现图像及表格的居中。这和使用的编辑器及其采用的样式有关。 在 vscode 的 Markdown Preview Enhanced ,要自定义 css,按下 cmd-shift-p 然后运行 Markdown Preview Enhanced: ...
  • ...水平垂直居中</div> css样式 div{ width:200px;height:200px; /*设置div大小*/ border:1px solid green; /*边框*/ text-align: center; /*文字水平居中对齐*/ l...
  • 最近在做一个项目,分别是登录前的状态,和登录后的状态,LinearLayout背景颜色和高度需要改变,LinearLayout布局中的TextView字体需要改变,ImageView控件要改变,原来是居中显示的,那么改变控件后,还想要居中,...
  • 首先再次详细解释一下JS窗口和网页几种尺寸属性含义 document.body.clientWidth(网页可见区域宽):是指浏览器显示网页区域宽度,不包括浏览器边框宽度和垂直滚动条宽度。大小随着浏览器窗口大小而...
  • 布局关于水平垂直两个方向居中的实现有几种方式:方式一:将容器设置为弹性容器,即display: flex;,在水平和垂直两个方向分别设置居中对齐。完整代码如下:<!DOCTYPE html> <html lang="en"> <head...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,205
精华内容 2,082
关键字:

代码中的居中