精华内容
下载资源
问答
  • 居中</title> <style> .father { display: table-cell; vertical-align: middle; text-align: center; width: 500px; height: 500px; background-color: rgb(197, 34, 34); } .child ...
  • 按照水平居中、垂直居中、行内元素、块级元素等条件进行组合获取效果水平居中:行内元素解决方案只需要把行内元素包裹在一个属性displayblock的父层元素中,并且把父层元素添加如下属性即可:.parent { ...

    按照水平居中、垂直居中、行内元素、块级元素等条件进行组合获取效果

    水平居中:行内元素解决方案

    只需要把行内元素包裹在一个属性display为block的父层元素中,并且把父层元素添加如下属性即可:

    .parent {
        text-align:center;
    }

    水平居中:块状元素解决方案

    .item {
        /* 这里可以设置顶端外边距 */
        margin: 10px auto;
    }

    水平居中:多个块状元素解决方案

    将元素的display属性设置为inline-block,并且把父元素的text-align属性设置为center即可:

    .parent {
        text-align:center;
    }

    水平居中:多个块状元素解决方案 (使用flexbox布局实现)

    使用flexbox布局,只需要把待处理的块状元素的父元素添加属性display:flex及justify-content:center即可:

    .parent {
        display:flex;
        justify-content:center;
    }


    垂直居中:单行的行内元素解决方案

    .parent {
        background: #222;
        height: 200px;
    }
    
    /* 以下代码中,将a元素的height和line-height设置的和父元素一样高度即可实现垂直居中 */
    a {
        height: 200px;
        line-height:200px; 
        color: #FFF;
    }

    垂直居中:多行的行内元素解决方案

    组合使用display:table-cell和vertical-align:middle属性来定义需要居中的元素的父容器元素生成效果,如下:

    .parent {
        background: #222;
        width: 300px;
        height: 300px;
        /* 以下属性垂直居中 */
        display: table-cell;
        vertical-align:middle;
    }

    垂直居中:已知高度的块状元素解决方案

    .item{
        top: 50%;
        margin-top: -50px;  /* margin-top值为自身高度的一半 */
        position: absolute;
        padding:0;
    }

    垂直居中:未知高度的块状元素解决方案

    .item{
        top: 50%;
        position: absolute;
        transform: translateY(-50%);  /* 使用css3的transform来实现 */
    }


    水平垂直居中:已知高度和宽度的元素解决方案1
    这是一种不常见的居中方法,可自适应,比方案2更智能,如下:

    .item{
        position: absolute;
        margin:auto;
        left:0;
        top:0;
        right:0;
        bottom:0;
    }

    水平垂直居中:已知高度和宽度的元素解决方案2

    .item{
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -75px;  /* 设置margin-left / margin-top 为自身高度的一半 */
        margin-left: -75px;
    }

    水平垂直居中:未知高度和宽度元素解决方案

    .item{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);  /* 使用css3的transform来实现 */
    }

    水平垂直居中:使用flex布局实现

    .parent{
        display: flex;
        justify-content:center;
        align-items: center;
        /* 注意这里需要设置高度来查看垂直居中效果 */
        background: #AAA;
        height: 300px;
    }

    来源:
    https://segmentfault.com/a/1190000003761600

    https://segmentfault.com/a/1190000000381042#articleHeader6

    展开全文
  • 水平居中直接加上&amp;lt;center&amp;gt;标签即可,或者设置margin:auto;当然也可以用下面的方法下面说两种在屏幕正中(水平居中+垂直居中)的方法 放上示范的html代码:&amp;lt;body&amp;gt; &...

    最近写网页经常需要将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
    展开全文
  • 前言:在网页布局中,经常遇到需要使元素居中对齐的时候,居中对齐的方式... 如果被设置的元素文本、图片等行内元素时,在父元素中设置text-align:center实现行内元素水平居中,将子元素的设置为display:inline-...

        前言:在网页布局中,经常遇到需要使元素居中对齐的时候,居中对齐的方式有:水平居中、垂直居中和水平垂直居中。这次,借此回顾总结一下,并在此记录下相关内容。

    一、水平居中:

        (1)行内元素的水平居中

                如果被设置的元素为文本、图片等行内元素时,在父元素中设置text-align:center实现行内元素水平居中,将子元素的设置为display:inline-block,使子元素变成行内元素;

    <div class="parent" style="background-color: gray;">
        <div class="child" style="background-color: light-blue;">demo</div>
    </div>
    <style>
    .parent {
        text-align: center;
    }
    .child {
        display: inline-block;
    }
    </style>

        (2)块状元素的水平居中(定宽)

            当被设置元素为定宽块级元素时用text-align:center;就不起作用了。可以通过设置“margin: 0 auto;”来实现居中的。

    <div class="parent" style="background-color: gray;">
        <div class="child" style="background-color: lightblue;">demo</div>
    </div>
    .child {
        width: 200px;
        margin: 0 auto;
    }

        (3)块状元素的水平居中(不定定宽)

            在实际工作中,我们会遇到需要为“不定宽度的块级元素”设置居中,如网页上的分页导航,因为分页的数量是不确定的,所以,不能通过设置宽度来限制它的弹性。

           可以直接给补丁款的块级元素设置text-align:center;来实现,也可以给父元素加text-align:center;来实现居中效果。

          当不定宽块级元素的宽度不要占一行时,可以设置display为inline类型或inline-block(设置为行内元素显示或行内块元素)。

    <div class="container">
        <ul>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
        </ul>
    </div>
    .container {
        text-align: center;
        background: beige;
    }
    .container ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: inline-block;
    }
    .container li {
        margin-right: 8px;
        display: inline-block;
    }

    二、垂直居中

          和水平居中一样,垂直居中,首先需设定两个条件即父元素是盒子容器且高度已经设定。

        (1)子元素是行内元素,高度是由其内容撑开的。

                这种情况下,需要通过设定父元素的line-height为其高度来使得子元素垂直居中。

    <div class="wrap line-height">
        <span class="span">111111</span>
    </div>
    .wrap {
        width: 200px;
        height: 300px;
        line-height: 300px;
        border: 2px solid #ccc;
    }
    .span {
        background: red;
    }

      

        (2)子元素是块级元素但子元素高度没有设定,在这种情况下,实际上是不知道子元素的高度的,无法通过计算得到padding或margin来调整。

           可以通过给父元素设定display:table-cell;vertical-align:middle;来解决。

    <div class="wrap">
        <div class="non-height">111111</div>
    </div>
    .wrap {
        width: 200px;
        height: 300px;
        border: 2px solid #ccc;
        display: table-cell;
        vertical-align: middle;
    }
    .non-height {
        background: green;
    }
    

        (3)子元素是块级元素且高度已经设定

            计算子元素的margin-top或margin-bottom,计算方法为父(元素高度-子元素高度)/ 2;

    <div class="wrap">
        <div class="div1">111111</div>
    </div>
    .wrap {
        width: 200px;
        height: 300px;
        border: 2px solid #ccc;
    }
    .div1 {
        width: 100px;
        height: 100px;
        margin-top: 100px;
        background: darkblue;
    }

    三、水平垂直居中

        (1)水平对齐+行高

                text-align + line-height实现单行文本水平垂直居中

    <style>
        .test {
            text-align: center;
            line-height: 100px;
    }
    </style>
    <div class="test" style="background-color: lightblue;width: 200px;"></div>

        (2)水平+垂直对齐

            ①text-align + vertical-align 在父元素设置text-align和vertical-align,并将父元素设置为table-cell元素,子元素设置为inline-block元素。

    <style>
    .parent {
        display: table-cell;
        text-align: center;
        vertical-align: middle;
    }
    .child {
        display: inline-block;
    }
    </style>
    <div class="parent" style="background-color: gray; width: 200px; height:100px;>
        <div class="child" style="background-color: lightblue;">测试文字</div>
    </div>

            ②若子元素是图像,可不使用table-cell,而是其父元素用行高代替高度,且字体大小设为0。子元素本身设置vertical-align:middle;

    <style>
    .parent {
        text-align: center;
        line-height: 100px;
        font-size: 0;
    }
    .child {
        vertical-align: middle;
    }
    </style>
    <div class="parent" style="background-color: gray; width: 200px;">
        <img class="child" src="images/1.png" width="50%" alt="test">
    </div>

        (3)相对+绝对定位

            使用absolute,利用绝对定位元素的盒模型特性,在偏移属性为确定值的基础上,设置margin: auto;

    <style>
    .parent {
        position: relative;
    }
    .child {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 80px;
        margin: auto;
    }
    </style>
    <div class="parent" style="background-color: lightgray;width: 200px; height: 100px;>
        <div class="child" style="background-color: lightblue;">测试文字</div>
    </div>

    PS:01、补充《三》中的水平垂直居中的方式(2018/08/29)

         translate()函数可以在不知道自身宽高的情况下,利用它进行水平垂直居中。但是,有兼容性问题,支持IE9+的游览器。

    使用translate函数,配合left,top属性,可以让目标元素始终保持水平垂直居中,当游览器窗口发生变化时,也能一直保持水平垂直居中。

    <div class="wrap">
       不知道宽高,可以水平垂直居中
    </div>
    .wrap {
        padding: 10px;
        background: green;
        color: #fff;
        border-radius: 5px;
        position: absolute;
        top: 50%;
        left: 50%;  /*定位margin-left:50%的位置*/
        -webkit-transform: translate(-50%,-50%); /*Safari,Chrome*/
        -moz-transform: translate(-50%,-50%);  /*IE9+*/
        transform: translate(-50%,-50%); /*使元素本身向左移动宽度的一半*/
        /*transform使元素在当前位置分别往x轴,y轴正向平移自身宽度的一半距离。*/
    }

    02、补充《三》中的水平垂直居中的方式(2018/11/29)

           场景:使用背景图片属性,使图片在父元素的盒子中始终居中,但是,背景图片的尺寸大小不固定。

          关键:background-position:center center;(background-position:50% 50%;)属性。

    <div class="index-imgBlock">
        <div class="index-image"></div>
    </div>
    .index-image {
        height: 268px;/*选取三张图片中最大高度的尺寸设定*/
        width: 100%;
        max-width: 484px; /*选取三张图片中的最大宽度的尺寸设定*/
        background: url(images/403.png);       /*403图片尺寸为484*206*/
        /*background: url(images/404.png);*/   /*403图片尺寸为428*268*/
        /*background: url(images/500.png);*/   /*500图片尺寸为475*236*/
        background-position: center center;
        border: 1px solid #333333;
    }

     

    background-position属性默认值为0% 0%,即背景图像的左上角与对象背景区域的左上角对齐。使用background-position:center center;/background-position:50% 50%;这样就可以使背景图像的中心,与背景区域的中心对齐,即背景图像位于对象的中央位置。

    参考博客:CSS布局(六)对齐方式  点击打开链接  http://www.cnblogs.com/chaixiaozhi/p/8490725.html 

     版权声明:本文为博主原创文章,未经博主允许不得转载。
                  
     

     

     

    展开全文
  • 设置按钮内容水平居中方式

    千次阅读 2016-05-06 08:02:55
  • 1.平居中设置-定宽块状元素 当被设置元素 块状元素 时用 text-align:center 就不起作用了,这时也分两种情况:定宽块状元素和不定宽块状元素。...我们来看个例子就是设置 div 这个块状元素水平居中:htm
  • CSS 水平居中设置

    千次阅读 2016-01-17 16:17:44
    layout: post title: CSS 水平居中设置 date: 2016-1-17 17:20:... 行内元素水平居中如果被设置元素文本、图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的。如下代码:html代码:<body>
  • CSS水平居中设置

    千次阅读 2018-03-21 22:58:23
    行内元素水平居中:行内元素的水平居中是相对于包裹它的块级元素来说的。(理解这句话)方法:给包裹行内元素的前辈块级元素设置text-align:center;1.&lt;label&gt;文字&lt;label&gt;在这里 让...
  • CSS水平和垂直居中方式

    千次阅读 2016-01-15 18:07:18
    水平居中1.1 行内元素的水平居中 /*行内元素水平居中*/ #div{ text-align:center; }1.2 块级元素的水平居中 /*块级元素水平居中*/ #div{ margin:0 auto; }1.3多个块级元素水 /*多个块级元素水平居中*/ #div-...
  • table 文字设置水平垂直居中

    万次阅读 2018-02-07 16:51:47
    设置水平居中,在tr或者td中设置都可以,但是垂直居中,如果只在tr中设置,那么在IE中无效 ;vertical-align:middle;"> 文字内容 text-align:center;设置水平居中 vertical-a
  • 定义的一个层即能在浏览器中左右居中,又可以上下居中,可以用绝对定位再结合百分比形式的left、top属性以及负外补丁来实现,下面是示例
  • css水平居中4种方式

    2008-12-18 10:55:23
    图片,宽度和高度居中对齐 css水平居中4种方式
  • android textview 设置多行水平居中

    千次阅读 2019-03-21 17:15:05
    textView要求多行水平居中,如下图 如何使用1个textView完成呢? 首先String设置“朝阳公园\n羽毛球友谊联合赛”,\n代表换行 其次textView设置属性android:layout_gravity="center_horizontal",android:...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 124,342
精华内容 49,736
关键字:

居中方式设置为水平