盒布局下的水平方向和垂直方向的对齐方式

时间 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>