精华内容
下载资源
问答
  • html居中

    2019-03-13 15:48:32
    第一部分:水平居中 1、常规元素的水平居中 行内元素、不定宽块级元素:text-align 图片的水平居中 :clear + display + margin 定宽块级元素:margin:0 auto; 通用方法(不管行还是块元素,通杀):flex 2、浮动...

    目录:
    第一部分:水平居中

    1、常规元素的水平居中
    行内元素、不定宽块级元素:text-align
    图片的水平居中 :clear + display + margin
    定宽块级元素:margin:0 auto;
    通用方法(不管行还是块元素,通杀):flex

    2、浮动元素的水平居中

    定宽元素:relative + margin-left + left
    不定宽元素:父float + 父relative + 子relative
    通用(不管是定宽还是不定宽,通杀):flex

    3、绝对定位元素的水平居中

    定宽的元素:relative + left + …
    不定宽的元素:relative + left + translateX
    通用方式:不管是否宽度,通杀 flex

    4、总结:水平居中的通用方式(包含常规元素、浮动、绝对定位):flex

    第二部分:垂直居中

    1、常规元素的垂直居中
    行内文本元素:line-height
    通用(不管行级,块级元素,图片,都通杀)tabel-cell + vertical-align 或 flex

    2、浮动元素的垂直居中

    定高的元素:(relative + absolute + line-height) + top/bottom或margin-top
    通用方式: flex

    3、绝对定位元素的垂直居中

    利用绝对定位自身来垂直居中:translateY
    通用:flex

    4、总结:垂直居中的通用方式(包含常规元素、浮动、绝对定位):flex

    第三部分:水平垂直居中

    1、常规元素的水平垂直居中
    通用(一列或多列):(table-cell + vertical-align + text-align) 或 flex

    2、浮动元素的水平垂直居中

    通用(一个或多列元素):flex

    3、绝对定位元素的水平垂直居中

    利用绝对定位来水平垂直居中:relative + translate
    通用:flex

    4、总结:水平垂直居中的通用方式(包含常规元素、浮动、绝对定位):flex

    第一部分:水平居中
    1、常规元素的水平居中
    行内元素、不定宽块级元素:text-align 
    注意:将div#inner 换成 span#inner 效果一样。
    样式:
    #outer {text-align:center}

    <div id='outer'>
       <div id='inner'>水平居中的元素</div>
    </div>

    图片的水平居中 :clear + display + margin 
    图片的居中,比较特殊。
    img {   // 设置这三个属性,就可以居中
        clear: both;
        display: block;
        margin:auto;
    }
    <div id='outer'>
       <img src="on1.png" >水平居中的元素</div>
    </div>

    定宽块级元素:margin:0 auto; 
    注意:样式是在inner元素中添加
    样式:
    #inner {width:200px;margin:0 auto;}

    <div id='outer'>
       <div id='inner'>水平居中的元素</div>
    </div>

    通用方法(不管行还是块元素,通杀):flex
    #outer {
       display:flex;
       justify-content:center;
    }

    <div id='outer'>
       <div id='inner'>水平居中的元素</div>
    </div>

    2、浮动元素的水平居中
    由于元素浮动之后,其本身就相当于设置了display:inline-block;也就是可以设置宽和高了。 
    所以浮动元素,没有行级和块之分,都是块级或inline-block的元素;只有定宽和不定宽之分 
    参考:浮动与宽高

    定宽元素:relative + margin-left + left 
    注意:样式设置在浮动元素本身
    样式:
    #inner-float {
       position:relative;
       left:50%;
       margin-left:-100px;
    }

    <div id="outer">
      <span id="inner-float" style="float: left;width: 200px;">我是要居中的浮动元素</span>
    </div>

    不定宽元素:父float + 父relative + 子relative 
    注意:要清除浮动,给外部元素加上float。这里的父元素就是外部元素
    #outer {
        float:left;
        position:relative;
        left:50%;
    }
    #inner-float {
        position:relative;
        left:-50%; 或 right:50%
    }

    <div id="outer">
      <span id="inner-float" style="float: left;">我是要居中的浮动元素</span>
    </div>

    通用(不管是定宽还是不定宽,通杀):flex
    #outer {
        display:flex;
        justify-content:center;
    }

    <div id="outer">
      <span id="inner-float" style="float: left;width: 200px;">我是要居中的浮动元素</span>
    </div>

    3、绝对定位元素的水平居中
    由于元素绝对定位之后,其本身就相当于设置了display:inline-block;也就是可以设置宽和高了。 
    所以绝对定位元素,没有行级和块之分,都是块级或inline-block的元素;只有定宽和不定宽之分 
    参考链接:绝对定位与宽度

    定宽的元素:relative + left + …
    // 写法一:
    #outer {
        position: relative;
    }
    #inner-absolute {
        left:50%;
        margin-left:-100px;
    }

    // 写法二:
    #outer {
        position: relative;
    }
    #inner-absolute {
        left:0;
        right:0;
        margin:0 auto;
    }

    <div id="outer">
      <span id="inner-absolute" style="position: absolute;width: 200px;">我是要居中的浮动元素</span>
    </div>


    不定宽的元素:relative + left + translateX
    #outer {
        position: relative;
    }
    #inner-absolute {
        left:50%;
        transform:translateX(-50%); // translateX是相对自身来计算的。
    }

    <div id="outer">
      <span id="inner-absolute" style="position: absolute;">我是要居中的浮动元素</span>
    </div>

    通用方式:不管是否宽度,通杀 flex
    #outer {
        display:flex;
        justify-content:center;
    }

    <div id="outer">
      <span id="inner-absolute" style="position: absolute;">我是要居中的浮动元素</span>
    </div>

    4、总结:水平居中的通用方式(包含常规元素、浮动、绝对定位):flex
    #outer {
        display:flex;
        justify-content:center;
    }

    <div id="outer">
      <span id="inner-absolute">我是要居中的常规、浮动、绝对定位元素,此办法都适用</span>
    </div>

    第二部分:垂直居中
    垂直居中,默认外部元素(这里称为父元素)是有高度的

    常规元素的垂直居中
    行内文本元素:line-height
       #inner {
          line-height:40px;
        }

    <div id="outer" style="height:40px;">
      <span id="inner">我是要居中的浮动元素</span>
    </div>

    通用(不管行级,块级元素,图片,都通杀)tabel-cell + vertical-align 或 flex
    方式一:diaplay:tabel-cell; vertical-align
    #outer {
        display: table-cell;
        vertical-align: middle;
    }

    方式二:flex + align-item
    #outer {
        display:flex;
        align-items:center;
    }

    <div id="outer" style="height:200px;">
      <span id="inner">我是垂直居中的元素</span>
    </div>

    注意:#outer{height:100px;display:table} #inner{display:table-cell;vertical-align: middle;} 也可以达到垂直居中,但是不通用。

    2、浮动元素的垂直居中
    定高的元素:(relative + absolute + line-height) + top/bottom或margin-top
    方式一:relative + absolute + line-height + top/bottom
       #outer {
          position: relative;
        }
        #inner {
          line-height:100px;
          position: absolute;
          top: 0;
          bottom: 0;
          margin: auto;
        }

    方式二:relative + absolute + line-height + margin-top
    #outer {
          position: relative;
    }
    #inner {
          line-height:100px;
          position: absolute;
          top: 50%;
          margin-top:-50px
    }

    <div id="outer" style="height:200px;">
      <div id="inner" style="float: left;height: 100px;">我是垂直居中的元素</div>
    </div>


    通用: flex
    #outer {
        display:flex;
        align-items:center;
    }

    <div id="outer" style="height:200px;">
      <div id="inner">我是垂直居中的元素</div>
    </div>

    3、绝对定位的垂直居中
    绝对定位元素相当于inline-block:没有行和块之分,只有定高和不定高之分。

    利用绝对定位自身来垂直居中:translateY
    #outer {
        position: relative;
    }
    #inner {
        top:50%;
        transform: translateY(-50%); // 相对自身向上移动
    }

    <div id="outer" style="height:200px;">
      <div id="inner" style="position: absolute;">我是垂直居中的元素</div>
    </div> 

    通用: flex
     #outer {
        display: flex; 
        align-items: center;
    }
    #inner {
        line-height:100px;
    }

    <div id="outer" style="height:200px;">
      <div id="inner" style="position: absolute;">我是垂直居中的元素</div>
    </div>

    4、总结:垂直居中的通用方式(包含常规元素、浮动、绝对定位):flex
    #outer {
        display: flex; 
        align-items: center;
    }
    #inner {
        line-height:100px;
    }

    <div id="outer" style="height:200px;">
      <div id="inner" style="position: absolute;">我是垂直居中的常规、浮动、绝对定位元素</div>
    </div>

    第三部分:水平垂直居中
    1、常规元素的水平垂直居中
    通用(一列或多列):(table-cell + vertical-align + text-align) 或 flex
    方式1一:table-cell + vertical-align + text-align 
    #outer {
        width:400px; // 方便看效果
        height:500px; // 方便看效果
        display:table-cell;
        vertical-align:middle;
        text-align:center;
    }
    #inner {
        display:inline-block; // 适合多列
    }
    通用:flex // 见下方
    2、浮动元素的水平垂直居中
    子元素可以设置 mairgin 以及word-wrap:break-word; 方便效果

    通用(一个或多列元素):flex // 见下方
    3、绝对定位元素的水平垂直居中
    利用绝对定位来水平垂直居中:relative + translate
     #outer {
        width:400px; // 方便看效果
        height:500px; // 方便看效果
        position: relative;
    }
    #inner {
        top:50%;
        left:50%;
        transform: translate(-50%, -50%);
    }

    <div id="outer" >
      <div id="inner" style="position: absolute;">我是水平垂直居中的元素</div>
    </div>

    通用:flex :见下方
    4、总结:水平垂直居中的通用方式(包含常规元素、浮动、绝对定位):flex
    #outer{
        width:400px; // 方便看效果
        height:500px; // 方便看效果
        display:flex;
        justify-content:center;
        aligns-item:center;
    }
    #inner {
        display:inline-block; // 适合多列
    }

    <div id="outer" >
     <div id="inner" >我是水平垂直居中的常规、浮动、绝对定位元素</div>
    </div>
    --------------------- 
    原文:https://blog.csdn.net/weixin_37219302/article/details/80504236 ,如有不当,请告知删除

    展开全文
  • html 居中

    千次阅读 2018-06-05 11:06:18
    水平居中1.行内元素水平居中 使用text-align &lt;div&gt;&lt;span&gt;居中&lt;/span&gt;&lt;/div&gt; div{text-align:center;}2.已知宽度块级元素水平居中 使用margin:0 auto;...

    水平居中

    1.行内元素水平居中

        使用text-align   

        <div><span>居中</span></div>

        div{text-align:center;}

    2.已知宽度块级元素水平居中

        使用margin:0 auto;

        <div></div>

        div{width:200px;height:25px;background-color:red;margin:0 auto;}

    3.未知宽度块级元素水平居中

        a.table方式

    <table>
      <tbody>
        <tr>
          <td><div>居中</div></td>
        </tr>
       </tbody>
     </table>

        table{margin:0 auto;}

        b.块级元素转为行内元素

        <div><p>居中</p></div>

        p{display:inline-block;}

        div{text-align:center;}

        c.使用相对定位

            <div><p>居中</p><p>居中</p><p>居中</p></div>

            div{float:left;position:relative;left:50%;}

            p{float:left;position:relative;left:-50%;}

        d.flex布局

            <div><p>居中</p></div>

            div{display:flex;justify-content:center;}

    垂直居中

    1.父元素高度不确定的文本、图片、块级元素的竖直居中

        父元素高度不确定,高度由内容撑开,高度等于行高。

        可设置padding-top和padding-bottom的值相等来撑开内容与父元素的边距。对每一个子元素同时设置vertical-align:middle;

    2.父元素高度确定的单行文本竖直居中

        设置父元素line-height等于height即可。对每一个子元素同时设置vertical-align:middle;

    3.父元素高度确定的多行文本竖直居中

           a.使用table布局,display:table-cell;vertical-align:middle; 存在浏览器兼容问题。

       

    展开全文
  • 1.html居中 margin:本身div居中 padding: 里面的div居中 2.android居中 <LiinearLayout android:gravity="center" >//里面控件居中 <L...

    1.html居中

    margin:本身div居中

    padding: 里面的div居中

    2.android居中

    <LiinearLayout

                        android:gravity="center"

    //里面控件居中


    <LiinearLayout

                        android:layout_gravity="center"

    > //本身居中




    转载于:https://my.oschina.net/moziqi/blog/327323

    展开全文
  • Html居中的用法

    2021-02-06 21:05:02
    Html居中的用法 文章目录Html居中的用法前言一、垂直居中1.垂直居中2.二、水平居中1.text-align:属性指定元素文本的水平对齐方式。2.已知宽度块级元素水平居中3.未知宽度块级元素水平居中三.垂直水平居中1.垂直居中...

    Html居中的用法


    前言

    提示:在日常的布局中,少不了需要用到居中,所以这篇文章对于居中做了一个简单的说明


    提示:居中有水平居中和垂直居中,然后比较常用的有水平居中,水平居中又可以分为行内元素和块级元素两种,块级元素又可以分为知道宽度和不知道宽度两种情况。下面案例可供参考

    一、垂直居中

    1.垂直居中

    vertical-align: middle:vertical-align 属性设置一个元素的垂直对齐方式。
    具体的属性

    <html>
        <head>
            <meta charset="utf-8" />
            <title>helloworld</title>
        </head>
        <style type="text/css">
            .div1{
                width: 200px;
                height: 200px;
                display: table-cell;
                vertical-align: middle;
                text-align: center;     
            }
            .div2{
                background-color: orangered;
            }
        </style>
        <body>
            <div class="div1">
                <div class="div2">
                   垂直居中
                </div>
            </div>
        </body>
    
    </html>
    
    

    2.

    二、水平居中

    1.text-align:属性指定元素文本的水平对齐方式。

    在这里插入图片描述

    代码如下(示例):

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    	<style type="text/css">
    		.center{
    			 text-align:center;
    		}
    	</style>
    </head>
    
    <body>
    	<div class="center">水平居中</div>
    </body>
    </html>
    
    

    2.已知宽度块级元素水平居中

    使用margin:0 auto;
    

    代码如下:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    	<style type="text/css">
    		.center{
    			 width:200px;
    			height:25px;
    			background-color:aqua;
    			margin:0 auto;
    		}
    		.p1{
    			text-align: center;
    		}
    		
    	</style>
    </head>
    
    <body>
    	<div class="center"><p class="p1">水平居中</p>
    	</div>
    </body>
    </html>
    
    

    3.未知宽度块级元素水平居中

    父元素浮动left:50%; 同时要设置position:relative(给子元素相对定位一个参考)
    子元素相对定位position:relative;left:-50%;
    代码如下:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    	<style type="text/css">
    		.center{
    			position:relative;
    			background-color:aqua;
    			 left:50%;
         			float:left;
    		}
    		.div1{
    			left:-50%;
    		}
    		
    	</style>
    </head>
    
    <body>
    	<div class="center"><div class="div1">不定宽水平居中</div>
    	</div>
    </body>
    </html>
    
    

    三.垂直水平居中

    1.垂直居中需要知道父级容器的宽高

    首先移动子元素高度(宽度)的一半:left:50%;(top:50%)
    再移动父元素高度(宽度)的一半:margin-left:-宽/2;(margin-top:-高/2;)
    代码如下:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    	<style type="text/css">
    		.center{
    			width: 200px;
        		height: 200px;
       			background-color: lightskyblue;
        		position: relative;
    		}
    		.div1{
    			margin-top: 25%;
    			  width: 100px;
     			  height: 100px;
      			  background-color: hotpink;
          		  position: absolute;
      			 
     			  margin-left:50px;
    		}
    		
    	</style>
    </head>
    
    <body>
    	<div class="center"><div class="div1">垂直水平居中</div>
    	</div>
    </body>
    </html>
    
    

    在这里插入图片描述

    四.总结

    以上就是常用的居中的方法,可能收集的不完全,我会慢慢补正。如果有不对的地方请大家指正。感谢大家可以看完。

    展开全文
  • HTML居中样式

    2021-02-22 17:35:50
    一、水平居中 行内水平元素居中(只是将子元素里的内联元素居中) text-align:center ; 块级元素水平居中 margin: 0 auto; 不定宽度 transform: translateX(-50%); 二、垂直居中 行内元素,设置height...
  • 一、计划运用浮动导致html居中最外层DIV使用了float:left(居中)或float:right(居右),这个构成整个html不克不及居中很好方案,去掉最外层运用float,再加之margin:0 auto就可兼容各大浏览器,接下来整个页面秒变...
  • HTML居中显示

    2020-05-12 22:39:26
    居中 文本居中: 1.单行文本的垂直居中:行高等于盒子的高度 height: 40px; line-height: 40px; <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>单行文本的...
  • 这个html整个网页不居中,而居左靠左,标题起因是最外层没有配置机关居中,有的配置了float:left,这样就形成整个网页靠左而不居中。一、妄想应用浮动导致html居中最外层DIV运用了float:left(居中)或float:right...
  • HTML居中对齐与垂直居中

    万次阅读 2019-01-06 13:42:22
    一、设置子div水平对齐 首先要有个父容器设置为text-...二、设置元素垂直居中 1.本人比较推荐使用弹性盒子,主要是现在一般浏览器都支持,可以自动调节 将父容器加上display:flex; flex-direction:column; j...
  • html居中问题

    2018-03-19 11:12:34
    一、水平居中(text-align:center)(可继承) 1、行内元素 text-align:取值包括4个:left | right | center | justify 这里的align指的是每行的文字都向一个方向靠。 ps:text-align存在兼容性问题 CSS2.1...
  • html 居中布局

    千次阅读 2013-10-30 18:16:32
    需求,有三个内容需要居中显示 内容居中,我们太熟悉了:) .content1,.content2,.content3{ width:960px; margin:0 auto; } 这样,三个内容都居中了。然后,当content1 内容里面的h1,距离顶部有50...
  • HTML居中方法的尝试

    2015-07-15 09:54:53
    HTML 图片居中
  • html居中通用办法

    2017-02-03 14:01:04
    首先需要一整行。   row自带block,所以占满一行,然后它会有margin-left和margin-right,保证左右都会超出一点点,大概30px。 这时候如果需要4块区域来...这个时候需要想一下每块区域里面的内容了,一般是一个居中
  • html居中的4种办法

    2020-06-14 17:05:28
    1.弹性盒子: display:flex; justify-content:center; align-items:center; 2自适应 margin:0 auto; 3.行内转变 父级加display:inline-block; 子级加text-align:center; 4.2D transform(我最常用) ......
  • doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> ...
  • HTML居中的三个小技巧

    2017-03-13 09:09:24
    一:当图片(img元素)远远大于父元素时,如何让图片居中显示呢? 1.1方法 图片的父元素设置text-align:center. 图片(img元素)设置margin:0 -100%;和高度; 1.2代码示例 *{
  • 我的table标签有三个td,我想让第一个td占满一整行,然后让里面的P标签居中显示,应该怎样做呢?其他两个td占了整个table的位置,p标签居中不了 ``` ;"> 项目管理软件 ;"> ...
  • html居中的元素带有float属性

    千次阅读 2015-12-18 11:19:55
    float设置浮动和margin设置居中两者本身就存在矛盾 解决办法是 在该元素外加一个div,设置div为居中,再设置该元素为float; 如图,我要设置蓝色背景的div居中,同时我又想让右侧的select框出现在图中位置。 ...
  • table表格居中显示(相对于包含它的控件) align:center div整个居中显示(相对于包含它的控件) margin: 0 auto; 文字居中显示 text-align: center;
  • 原来HTML不兼容不居中改为居中示意图这里CSS5教大家一个小技巧,轻松解决整篇网页水平居中。一、对于html网页宽度固定系统的居中方法对网页主体(网页最外层 即后加,前加一个结束)加一个div盒子,对这个盒子设置布局...
  • 原来HTML不兼容不居中改为居中暗指图这里CSS5教各人一个小才能,轻松办理整篇网页水平居中。一、关于html网页宽度固定琐细的居中法子对网页主体(网页最外层 即后加,前加一个完毕)加一个div盒子,对这个盒子设置装备...
  • 最近写网页经常需要将div在屏幕中居中显示,遂记录下几个常用的方法,都比较简单。...放上示范的html代码:&amp;lt;body&amp;gt; &amp;lt;div class=&amp;quot;main&amp;quot;&amp;gt;
  • 居中</title> <style> .father { display: table-cell; vertical-align: middle; text-align: center; width: 500px; height: 500px; background-color: rgb(197, 34, 34); } .child ...
  • html文字居中�?a href="//www.css5.com.cn/html/352.shtml">html图片居中方法代码,通过在html中实现文字居中图片居中篇�?a href="//www.css5.com.cn/html/">html中实现文字图片内容居中有三种方法,其中两...
  • html中table居中和表格内容居中的问题

    万次阅读 多人点赞 2016-09-20 10:25:01
    在表格td中,有两个属性控制居中显示 align——表示左右居中——left,center,right valign——控制上下居中——left,center,right 这两个属性综合使用,就可以让单元格的内容上下左右都居中显示。 ...
  • 遇到过有的涉猎器中网页主体模式是居中的(网页居中),可有的涉猎器中HTML网页小我私家是靠右(居右)的。标题问题启事在于没有设置css构造居中属性margin。html最外层DIV设置宽度同时重要配置居中CSS属性。margin:0 ...
  • 碰着过有的浏览器中网页主体内容是居中的(网页居中),可有的阅读器中HTML网页整体是靠右(居右)的。标题起因在于没有配置css机关居中属性margin。html最外层DIV配置宽度同时需求设置居中CSS属性。margin:0 autoHTML...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 13,833
精华内容 5,533
关键字:

html居中