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

原文链接:https://my.oschina.net/u/2561199/blog/756734

使用盒布局的时候,可以使用 box-pack 属性及box-align属性来指定元素中文字、图像及子元素水平方向或垂直方向的对齐方式。

输入图片说明

让元素设置为盒布局,然后使用这两个属性就行

<!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>

输入图片说明

转载于:https://my.oschina.net/u/2561199/blog/756734

展开阅读全文
博主设置当前文章不允许评论。

没有更多推荐了,返回首页