精华内容
参与话题
问答
  • 水平居中直接加上<center>标签即可,或者设置margin:auto;当然也可以用下面的方法下面说两种在屏幕正中(水平居中+垂直居中)的方法 放上示范的html代码:<body> &...

    最近写网页经常需要将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图片垂直水平居中

    万次阅读 2020-06-17 23:34:16
    方案一、性能比方案二好 /*将最外层元素都撑开到100%屏幕*/ html,body{ width:100%; height:100%; } body{ text-align:center; } body:after{ content:""; display:inline-block;... position:abs

    方案一、性能比方案二好

    /*将最外层元素都撑开到100%屏幕*/
    html,body{
    	width:100%;
    	height:100%;
    }
    body{
    	text-align:center;
    }
    body:after{
    	content:"";
    	display:inline-block;
    	height:100%;
    	vertical-align:middle;
    }
    /*选中的图片元素*/
    img{
    	vertical-align:middle;
    }
    

    方案二、

    img{
    	position:absolute;/*这里是方案二的代价*/
    	left:0;
    	right:0;
    	top:0;
    	bottom:0;
    	margin:auto;
    }
    
    展开全文
  • 图片在容器中水平居中css

    千次阅读 2014-09-13 20:48:33
    在浮动的li 或div 中,未知大小的图片水平居中代码 #team li img{ clear: both; display: block; margin:auto; float:none; /*浮动容器中*/}

    在浮动的li 或div 中,未知大小的图片水平居中代码

    #team li img{
    	clear: both;
    	display: block;
    	margin:auto; 
    	float:none; /*浮动容器中*/}


    展开全文
  • 实现Div层里的文字垂直居中的方法 有时候,为了网页设计的美观,需要把div+css设计的页面里的某些div层里的文字垂直居中,包括多行文字以及单行文字;方法有不少,但真正能实现而代码又简洁的介绍不多,flymorn就为...

    实现Div层里的文字垂直居中的方法   有时候,为了网页设计的美观,需要把div+css设计的页面里的某些div层里的文字垂直居中,包括多行文字以及单行文字;方法有不少,但真正能实现而代码又简洁的介绍不多,flymorn就为大家介绍几种适用的div文字垂直居中的方法。
         首先要知道css里vertical-align无效,W3C官方对vertical-align做了下面的解释: “ This property affects the vertical positioning inside a line box of the boxes generated by an inline-level element.” 
        
         实际上,一个Box中由很多行很多元素组成,vertical-align只作用于在同一行内的元素,它的垂直并不是相对于整个Box而言的。前面定义了一个60px的高度,但是这个Box中存在很多行,那段文本并不能对齐到中央。因此希望那段文本对齐中间,需要给它定义一个line-height的属性,让line-height为60px,作用于一行的vertical-align就可以工作了。   

        如果是单行文字想垂直居中,只要保证div高和行高保持一致,就可以了。用下面的代码即可实现:

    CSS代码:
    #div-a{
    height:60px;
    line-height:60px;
    }

    XHTML代码:
    <div id="div-a">
     
    div 文字 垂直居中

    </div>

     

        如果还想让div里的文字水平居中,加上“text-align:center;”即可;代码如下:

    CSS代码:
    #div-a{
    text-align:center;
    height:60px;
    line-height:60px;
    }

    XHTML代码:
    <div id="div-a">

    css div 文字 垂直居中 
     div css 文字 水平居中

    </div>

         说明:如果在父级元素定义TEXT-ALIGN:center;这个的意思就是在父级元素内的内容居中;对于IE这样设定就已经可以了。但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT:auto; MARGIN-LEFT:auto;”。

        但是,如果是多行文字,上面的垂直居中的方法就不行了,得用变通的方法实现;这里建议使用table方法,在table外面再套上相应的div,代码如下:

    <table>
    <tr><td style="vertical-align:middle;height:300px;background-color:red">

    居中的方法
    </td></tr>
    </table>

        多行文字居中还有另外一种方法:

    多行内容居中,且容器高度可变,也很简单,给出一致的 padding-bottom 和 padding-top 就行:

    .middle-demo-2{
    padding-top: 24px;
    padding-bottom: 24px;
    }

        优点:
    1. 同时支持块级和内联极元素
    2. 支持非文本内容
    3. 支持所有浏览器
        缺点:
    容器不能固定高度(参考)

        如何使图片在DIV中垂直居中,可以用背景的方法。如下:

    body{
    BACKGROUND:url(http://www.jeecn.com ) #FFF no-repeat center;

         关键就是最后的center,这个参数定义图片的位置。还可以写成“top  left”(左上角)或者"bottom right"等,也可以直接写数值"50 30"

    展开全文
  • 水平方向调整元素位置 width: 300px; margin: auto; position: absolute; left: 0; right: 0; 水平方向调整背景图片 background-position-x: -600px;//水平方向,同理垂直y也可以调整 #triangle03{ width:...
  • div居中之css水平居中 单行多行文本垂直居中
  • CSS水平居中+垂直居中+水平/垂直居中的方法总结

    万次阅读 多人点赞 2018-09-02 19:28:12
    水平居中  行内元素  块级元素 方案一:(分宽度定不定两种情况) 方案二:使用定位属性 方案三:使用flexbox布局实现(宽度定不定都可以) 垂直居中 单行的行内元素 多行的行内元素  块级元素 水平垂直...
  • css水平居中

    2014-08-07 23:53:42
    水平居中在网页前端设置是最常见的 1
  • CSS 水平居中

    2013-05-20 22:42:29
    一、水平居中: ①:文本、文本等行内元素的水平居中:给父元素设置text-align:center可以实现文本、图片等行内元素的水平居中: .test { text-align: center;} I am test! ②:确定宽度的块级元素的水平居中...
  • 小主把截图截的偏了所以看着好像不居中,但是是居中的哦,还有截图上的floatbox有position:fixed样式,这里没有粘贴哦。。     拒绝理由就打死我发的是看见发货单上看了附近的说了句发的是开发商的付款了电视...
  • 本文主要介绍水平居中,垂直居中,还有水平垂直居中各种办法,思维导图如下: 水平居中 1.行内元素水平居中 利用 text-align: center 可以实现在块级元素内部的行内元素水平居中。此方法对inline、...
  • 前言:在网页布局中,经常遇到需要使元素居中对齐的时候,居中对齐的方式有:水平居中、垂直居中和水平垂直居中。这次,借此回顾总结一下,并在此记录下相关内容。 一、水平居中:  (1)行内元素的水平居中  ...
  • 1、对body设置CSS内容居中样式text-align:center,代码:body{text-align:center}2、对最外层对象设置margin:0 auto样式,代码:.divcss5{margin:0 auto} 转载于:https://www.cnblogs.com/xuxian/p/4002...
  • css文字水平居中

    千次阅读 2019-03-18 16:39:19
    水平居中 (1)**文字的水平居中 语法:text-align:center; 举例: &lt;style type="text/css"&gt; div{ width: 400px; height: 60px; line-height: 60px; text-align: center; /*实现文字水平...
  • css3水平居中垂直居中

    2018-05-23 10:33:10
    css3水平居中垂直居中
  • 这里父元素和子元素的宽高都是不确定的,想实现子元素在父元素中的水平居中、垂直居中、水平垂直居中。下面列出了部分解决方法,如果大家有好的方法,欢迎留言~ 一、水平居中 html代码如下: &lt;div class=...
  • 居中总体来说可以分为水平居中还有垂直居中,顾名思义,定义这里就不解释了!首先,我们来看下垂直居中:(1)、如果是单行文本,则可以设置的line-height的数值,让其等于父级元素的高度!&lt;!DOCTYPE ...
  • 让div水平居中css方法

    万次阅读 多人点赞 2018-01-02 19:42:23
    一:让div水平居中css方法:(默认情况下div的display为block,以下是针对display:block来说的) 1、给要设置水平居中的div设置display:block ,margin:0 auto,width , height4个属性,可以让块级元素水平居中...
  • CSS水平居中与垂直居中总结: 累计 7 种水平居中 , 5 种垂直居中, 4 种垂直水平同时居中。
  • css 水平居中和垂直居中

    千次阅读 2015-01-30 15:31:51
    1.水平居中 (1) 文本、图片等行内元素的水平居中  给父元素设置text-align:center可以实现文本、图片等行内元素的水平居中。 (2) 确定宽度的块级元素的水平居中  通过设置margin-left:auto;
  • 1、CSS实现盒子模型水平居中 HTML: CSS全局样式: 方法一: 使用margin:0 auto;(只适用子盒子有宽度的时候) 方法二:text-align+display(只适用于子盒子有宽度和高度时) 方法三:position定位(只适用于子盒子...
  • 水平居中 垂直居中 水平垂直居中 水平居中 水平居中需要考虑3点: 行内或是行内元素居中? 块级元素居中? 多个块级元素居中? 1、行内或是行内元素居中: 这可以适用于inline, inline-block, inline-table...
  • css img 居中/水平居中/垂直居中

    千次阅读 2016-12-26 19:45:07
    这是一个很简单的问题 , 也是一个很蛋疼的问题:以下是html代码 这是图片文字提示" src="./bg.png"> 以下是css代码:.img_center{ display:flex; justify-content:center; align-items:center;
  • CSS垂直居中和水平居中

    千次阅读 2016-03-20 21:10:46
    CSS居中一直是一个比较敏感的话题,为了以后开发的方便,楼主觉得确实需要总结一下了,总的来说,居中问题分为垂直居中和水平居中,实际上水平居中是很简单的,但垂直居中的方式和方法就千奇百怪了。 内联元素居中...
  • css让图片居中

    万次阅读 2017-12-08 20:24:47
    css让图片居中,不管图片是方图、竖图、横图,都可以让图片在父框架下居中,即方图则占满整个父框架;横图则左右填充上下居中;竖图则左右居中上下填充 1、html如下: /*这里的图片路径自己设置*/ 2、css...

空空如也

1 2 3 4 5 ... 20
收藏数 29,029
精华内容 11,611
关键字:

水平居中