元素水平居中的幾個方法

時間 2019-11-10

標籤元素水平居中幾個方法简体版

原文原文鏈接

一、行內元素的居中，html

例如想設置文本、圖片等行內元素水平居中時，能夠經過父元素設置 text-align:center 來實現，即給須要設置的元素添加一個父元素的容器，而後設置這個父元素（容器）的text-align屬性便可。方法簡單，原理也很容易理解，須要注意的是隻能針對行內元素；瀏覽器

<!-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box1{
            text-align:center;
        }
    </style>
</head>
<body>
    <div id="box1">
        <span>想讓行內元素居中顯示</span>
    </div>

</body>
</html> -->

效果圖：測試

二、寬度必定的塊狀元素居中。spa

由於是塊狀元素，因此就沒辦法運用第一種方法的text-align屬性了，此次咱們是經過對須要設置的元素的「左右margin」值爲「auto」來實現，margin的上下值能夠根據需求隨意設置，可是左右必定要爲」auto」！須要注意的是，在設置 margin:20px auto 以前，必定要先設置width的值，即最後的設置樣例爲：
div { border:2px solid red; width:100px; margin:20px auto; }
即2個像素寬的紅色實體邊框，整個div元素的寬度爲100像素，上下距離瀏覽器的空白邊距爲20像素，左右根據內容自動調整，這樣就實現了塊狀元素的居中顯示，別忘了，要先設置width：寬度值！寬度值！寬度值！這種方法優勢是簡單易懂，兼容性也強，可是擴展性比較差，沒法自適應未知寬度的元素。code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .nj{
            width:600px;
            margin: 0 auto;
            border:1px solid black;
        }
    </style>
</head>
<body>
    <div id="box2">
        <div class="nj">想讓行內元素居中顯示</div>
    </div>

</body>
</html>

效果圖：htm

三、寬度不肯定塊狀元素的居中顯示。blog

這裏大概也能夠分爲三個方法：圖片

1）運用table標籤；2）設置display:inline；3）設置position:relative和left:50%。博客

3.一、運用table標籤。第一步：在須要設置的元素外面加上一個table標籤（包括，是否是有點相似設置行內元素時添加一個父元素的容器呢？）。第二步：給這個table設置」左右margin居中」（這裏又和設置定寬塊狀元素的方法同樣了）。it

1）運用table標籤；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        table {margin: 0 auto;}
    </style>
</head>
<body>
    <table>
        <tbody>
            <tr><td>
                <a href="#">Prev</a>
                <a href="#">1</a>
                <a href="#">2</a>
                <a href="#">3</a>
                <a href="#">4</a>
                <a href="#">5</a>
                <a href="#">Next</a>
            </td></tr>
        </tbody>
    </table>
</body>
</html>

總結：就是將須要進行居中的元素，用一個大表格將其圍起來（並且這個表格只有這一個單元格哦），而後設置表格的屬性（如第2條方法）居中就行。不過缺點是加了很多的無用標籤，代碼看起來比較臃腫。

3.2）、改變塊級元素的display爲inline類型，而後設置text-align:center來實現居中效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .container {text-align: center;}
        .container li {display: inline;}
    </style>
</head>
<body>
    <div class="container">
        <ul>
            <li><a href="#">fewe</a></li>
            <li><a href="#">fewa</a></li>
            <li><a href="#">d</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">dwedfe</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">Next</a></li>
        </ul>
    </div>
</html>

總結：首先將須要居中的塊級元素的display屬性設置爲inline，這樣的目的是先把塊級元素變爲行內元素，能夠在一行內顯示，而後將這些元素的父級元素text-align設置爲：center便可。大概原理就是：塊級->行內->居中(參照第1條方法)，不過缺點也很明顯，塊級元素的一些特色沒有了，例如高度、寬度設置等。

3.3）、運用float屬性，主要的思想也就是將所須要居中的元素先float到左邊，這樣就能在一行內顯示，而後將整個列表float到父元素左邊，而後設置left來設置居中。怎麼設置呢？先設置父元素：left:50%，這樣整個父元素就往右便宜50%，而後設置列表：right:50%，這樣列表的東西再往左走父元素的50%，這樣就達到了居中的目的。
代碼樣例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .container {
            float:left;
            position: relative;
            left: 50%;
        }
        .container ul {
            /*float: left;*/
            position: relative;
            right: 50%; 
            padding:0;
            margin: 0;
        }
        .container li {
            /*float: left;*/
            position: relative;
            display: inline;
        }
        .container a {
            padding: 0 20px;
        }

    </style>
</head>
     <div class="container">
        <ul>
            <li><a href="#">Prev</a></li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">Next</a></li>
        </ul>
    </div>
</html>

總結：基本思想也就是將父元素（容器）先往右偏移父容器寬度的50%，而後再將列表的元素向左相對偏移50%，就能夠獲得居中的效果。（這個方法不理解的話能夠看下邊W3C博客，那裏邊介紹的詳細，具體連接見下邊敘述。）不過我當時在測試這一點的時候，有個問題，就是ul的padding和margin沒有清零，而後致使一直不太居中，後來清零就行了。

相關標籤/搜索

每日一句

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