Web前端开发-垂直居中

Web前端开发,自学笔记整理


垂直居中

1.垂直居中问题-1


<html>
    <head>
        <meta charset="UTF-8">
        <title>title>
            <style type="text/css">
                .info1 {
                    width: 300px;
                    height: 300px;
                    background: lightblue;
                    color: brown;

                    text-align: center;
                    line-height: 300px;
                }

                .info2 {
                    width: 300px;
                    height: 300px;
                    background: lightgreen;
                    color: yellow;

                    text-align: center;
                    line-height: 300px;
                }

                .info3 {
                    width: 300px;
                    height: 300px;
                    background: lightgreen;
                    color: yellow;

                    /*仅支持行内元素、行内块元素*/
                    /*text-align: center;*/

                    overflow: hidden;
                }
                .view {
                    width: 100px;
                    height: 100px;
                    background: lightcoral;

                    /*块状元素*/
                    margin: 100px;


                }
            style>
    head>
    <body>
        <p class="info1">
            元素类型
        p>
        <br />
        <div class="info2">
            <a href="#">百度一下a>
        div>
        <br />
        <div class="info3">
            <div class="view">div>
        div>
    body>
html>

2.垂直居中问题-2


<html>
    <head>
        <meta charset="UTF-8">
        <title>title>
        <style type="text/css">
            .box {
                width: 300px;
                height: 300px;
                background: lightblue;

                text-align: center;
            }
            /*300-105 = 195 195/2=97.5*/
            .box img {
                /*margin-top:97.5px ;*/
            }
        style>
    head>
    <body>
        <div class="    box">
            <img src="../04-卧龙控股/img/bg.png" />
        div>
    body>
html>

3.垂直居中设置技巧


<html>
    <head>
        <meta charset="UTF-8">
        <title>title>
        <style type="text/css">
            p {
                text-align: center;
            }
            p img {
                vertical-align: middle }

            /*
             .box是外层盒子
             img是要设置居中的内容
             span作为参考对象

             行内块元素都支持text-align、vertical-align
             1. img和span都设置为行内块元素 display: inline-block;
             2. img和span垂直居中 vertical-align: middle;
             3. .box设置水平位置居中 text-align: center;
             4. span的高度和父元素一致 height: 100%;
             5. span只是作为参考,不需要显示 width: 0;
             */
            .box {
                width: 400px;
                height: 400px;
                background: lightblue;
                text-align: center;
            }
            .box span {
                /*width: 5px;*/
                width: 0;
                /*height: 300px;*/
                height: 100%;
                background: lightgreen;
                display: inline-block;
                vertical-align: middle;
            }
            .box img {
                display: inline-block;
                vertical-align: middle;
            }
        style>
    head>
    <body>
        
        <p>
            段落标签
            <img src="../04-卧龙控股/img/bg.png"
        p>
        <div class="box">
            
            <span>span>
            
            <img src="../04-卧龙控股/img/bg.png" />
        div>
    body>
html>

你可能感兴趣的:(HTML/CSS)