盒佈局下的水平方向和垂直方向的對齊方式

時間 2019-11-12

標籤佈局水平方向垂直對齊方式简体版

原文原文鏈接

使用盒佈局的時候，可使用 box-pack 屬性及box-align屬性來指定元素中文字、圖像及子元素水平方向或垂直方向的對齊方式。html

讓元素設置爲盒佈局，而後使用這兩個屬性就行web

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            width: 1080px;
            height: 1000px;
            font-size: 16px;
            color: #3b4653;
            border:1px solid #e33030;

            display: -moz-box;/*設置元素爲盒佈局*/
            display: -webkit-box;

            -moz-box-align: center;/*垂直居中*/
            -webkit-box-align: center;

            -moz-box-pack: center;/*水平居中*/
            -webkit-box-pack: center;
        }
    </style>
</head>
<body>
    <div>
        <img src="images/hua.png" alt="">
    </div>
</body>
</html>

相關標籤/搜索

每日一句

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