span文字水平居中_居中技巧

c782ae25a2dcde4a08e57bae1c9fc12c.png

    居中分为垂直居中和水平居中。

水平居中

    水平居中分为文字居中和元素居中。元素又分为块元素和行内元素以及复合行内元素。 

文字水平居中

    文字水平居中可以直接用text-align:center; 

块元素水平居中

    块元素需要先给一个width,之后将margin的左右设置为auto就行了

举例:  

DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8" />

        <title>块元素水平居中title>

        <style type="text/css">

            .wrapper{

                width: 200px;

                height: 100px;

                border: 1px solid black;

                margin: 0 auto;

                background-color: burlywood;

            }

        style>

    head>

    <body>

        <div class="wrapper">div>

    body>

html>

1221d5a2288a0db3e2362a161a9a2fb6.png

行内元素和复合行内元素水平居中

    复合行内元素即是行内块元素、inline-table、inline-flex等。

    行内元素和复合行内元素可以直接用text-align:center;实现水平居中,与文字居中相似。 

垂直居中

    垂直居中分为文字垂直居中和元素垂直居中。

    文字分为单行文字和多行文字

    元素分为块元素和行内块元素   

单行文字垂直居中

    需要把height与line-height相等就能实现 

DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8" />

        <title>单行文字垂直居中title>

        <style type="text/css">

            .wrapper{

                height: 100px;

                width: 200px;

                line-height: 100px;

                border: 1px solid black;

            }

        style>

    head>

    <body>

        <div class="wrapper">我真的是太帅了div>

    body>

html>

0d82608c8feea30a7170fc939da4d76f.png 

多行文字垂直居中

     实现:用标签把所有文字包含,定义span为inline-block元素,之后使用inline-块元素垂直居中的方式,可以先看下面inline-block元素垂直居中方式。

举例:     

DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8" />

        <title>多行文字垂直居中title>

        <style type="text/css">

            .wrapper{

                display: table-cell;

                vertical-align: middle;

                width: 200px;

                height: 150px;

                border: 1px solid black;

            }

            span{display: inline-block;}

        style>

    head>

    <body>

        <div class="wrapper">

            <span>刘德华<br />

                张学友<br />

                郭富城<br />

                黎明

            span>

        div>

    body>

html>

0268336d1fa6f84027eb0907c9faf883.png

块元素垂直居中

    对于高度已知的块元素,可以使用position实现。

    方法是:

父元素{

    position: relative;

}

子元素{

    position: absolute;

    top: 50%;

    left: 50%;

    margin-top: "height值一半的负值";

    margin-left: "width值一半的负值";

}

举例:

DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8" />

        <title>块元素垂直居中title>

        <style type="text/css">

            .father{

                position: relative;

                width: 200px;

                height: 150px;

                border: 1px solid black;

            }

            .son{

                position: absolute;

                top: 50%;

                left: 50%;

                background-color: blue;

                width: 50px;

                height: 50px;

                margin-top: -25px;

                margin-left: -25px;

            }

        style>

    head>

    <body>

        <div class="father">

            <div class="son">div>

        div>

    body>

html>

6c3416236496e1c2153eeee0b6cec79e.png

    如果单独需要水平居中,将top和margin-top属性去掉。单独需要垂直居中将left和margin-left属性去掉。  

行内块元素垂直居中

    方法: 

父元素{

    display: table-cell;

    vertical-align: middle;

}

子元素{

    vertical-align: middle;

}

举例:

DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8" />

        <title>行内块元素垂直居中title>

        <style type="text/css">

            .wrapper{

                display: table-cell;

                vertical-align: middle;

                width: 200px;

                height: 150px;

                border: 1px solid black;

            }

            img{

                vertical-align: middle;

            }

        style>

    head>

    <body>

        <div class="wrapper">

            <img src="C:\Users\雨殇\Desktop\lion.png" alt=""/>

        div>

    body>

html>

06e289a4aa5dc56759971493d7c54d79.png


本节主要学习了居中技巧,最后对其总结。       

  • 总体分为水平居中和垂直居中

  • 文字水平居中

  • 块元素水平居中

  • 行内元素和复合行内元素水平居中

  • 单行文字垂直居中

  • 多行文字垂直居中

  • 块元素垂直居中

  • 行内块垂直居中

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值