html元素水平居中的幾種方法

時間 2019-11-13

標籤 html 元素水平居中幾種方法欄目 HTML 简体版

原文原文鏈接

下面我將一一的介紹關於html元素水平居中的幾種方式css

一：對於行內元素採用text-align:center;的方式html

二：採用margin:0 auto;來實現水平居中顯示
css3

三：用table實現flex

四；塊級的元素可是經過轉換成行內元素來實現塊級元素的水平居中顯示this

五：父子元素都採用相對定位，父元素left:50%;子元素left:-50%;相對本身的長度減回50%，這樣實現向右偏移後拉回多的部分flexbox

六:採用css3的flexbox，display:flex;code

七：用父元素的 display:relative;直接採用position:absolute;left:0;right:0;margin:auto來實現水平以居中htm

下面是講解的具體的代碼：blog

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>css的水平居中</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <style type="text/css">
            #page{
                width: 100%;
                color: white;
            }
            .he{
                width: 100%;
                height: 100px;
                background: #625050;
                text-align: center;
                line-height: 100px;
            }
            .bo{
                width: 100%;
                background: #6aa087;
            }
            .fo{
                height: 100px;
                background: #2f5d34;
            }
            .content{
                height: 100px;
                border: 2px solid #fff;
            }
            .content1{
                background: #66a05c;
                text-align: center;
            }
            .content2{
                background: #8a5841;
                text-align: center;
            }
            .content2Bo{
                height:50px;
                width: 60%;
                border: 2px solid red;
                line-height: 50px;
                margin: 0 auto;
            }
            .content3{
                background: #2f5d34;
            }
            table{
                margin: 0 auto;
            }
            .content4{
                background: #8a5841;
                text-align: center;
            }
            .contentBo4{
                display: inline;
            }
            ul li{
                list-style-type: none;
            }
            .content5{
                float: left;
                position: relative;
                left: 50%;
            }
            .contentBo5{
                position: relative;
                left: -50%;
                background: #231b40;
            }
            .content6{
                width: 100%;
                text-align: center;
                background: #9ca05c;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .content7{
                position: relative;
            }
            .contentBo7{
                position: absolute;
                left: 0;
                right: 0;
                width: 80%;
                border: 2px solid red;
                margin: 0 auto;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div id="page">
            <div class="he">
                <h1>下面是對元素水平居中對齊的幾個例子以及說明</h1>
            </div>
            <div class="bo">
                <div class="content content1">
                    這是內容區一：實現對行內元素的水平居中顯示 採用text-align:center;的方式。
                </div>
                <div class="content content2">
                    <div class="content2Bo">
                        這是內容區二:紅色區域部分採用margin:0 auto;來實現水平居中顯示，固然要寫好元素的寬度。
                    </div>
                </div>
                <div class="content content3">
                    <table><tbody><tr><td>
                                    這是內容區三：用table實現。
                                </td></tr></tbody></table>
                </div>
                <div class="content content4">
                    <ul class="contentBo4">
                        <li>這是第一行</li>
                        <li>這是第二行</li>
                        <li>這是內容區四：原本是contentBo4的塊級的元素可是經過轉換成行內元素來實現塊級元素的水平居中顯示。</li>
                    </ul>
                </div>
                <div class="content5">
                    <div class="content contentBo5">
                        這是內容區五：父子元素都採用相對定位，父元素left:50%;子元素left:-50%;相對本身的長度減回50%，這樣實現向右偏移後拉回多的部分。
                    </div>
                </div>
                <div class="content content6">
                    這是內容區六:採用css3的flexbox，display:flex;
                </div>
                <div class="content content7">
                    <div class="contentBo7">
                        這是內容區七:用父元素的 display:relative;直接採用position:absolute;left:0;right:0;margin:auto來實現水平以居中。
                    </div>
                </div>
            </div>
            <div class="fo">
                <pre> 總結下：其實實現水平居中只有一下幾種思路：
                    1：對於最簡單的行內元素的居中採用text-align:center;設置便可。
                    2：對於最普通的水平居中採用絕對定位後設置left：50%;後再採用各類方式去實現自身水平差的補回。
                    3：對於普通的元素對齊還能夠採用絕對定位後left:0;right:0;加上元素的寬度，在此基礎之上就能夠採用margin:auto;實現水平對齊了。
                    4：用css3的Flexbox屬性
                    5:在元素外嵌套table實現，可是這樣會有不少層嵌套 
                    6：marin:0 auto;方便的實現已知寬度的水平居中
                </pre>
            </div>
        </div>
    </body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。