pc端常見佈局---水平居中佈局單元素定寬

時間 2019-11-06

標籤常見佈局水平居中元素定寬简体版

原文原文鏈接

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>常見元素佈局</title>
        <style type="text/css">
            /* 1、水平居中佈局 */
            /* 1.單個元素水平居中 寬度固定 最經常使用*/ .box { width: 400px; margin: 0 auto; background: #008000; color: #fff; /* background和color測試更好的觀看效果 */ text-align: center; /* 字體居中 */
            }
        </style>
    </head>
    <body>
        <div class="content">
            <div class="box"> 寬度固定 </div>
        </div>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>常見元素佈局</title>
        <style type="text/css">
            /* 1、水平居中佈局 */
            /* 1.單個元素水平居中 寬度固定 定位居中佈局*/ .content { position: relative;
            } .box { width: 400px; position: absolute; left: 0; right: 0; margin: 0 auto; background: #ff9933; color: #fff; /* background和color測試更好的觀看效果 */ text-align: center; /* 字體居中 */
            }
        </style>
    </head>
    <body>
        <div class="content">
            <div class="box"> 寬度固定 </div>
        </div>
    </body>
</html>

效果：css

相關標籤/搜索

pc端常見佈局---水平居中佈局 單元素定寬

pc端常見佈局---水平居中佈局單元素定寬