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

最新推荐文章于 2024-06-12 12:13:36 发布

转载最新推荐文章于 2024-06-12 12:13:36 发布 · 375 阅读

0 ·

CC 4.0 BY-SA版权

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

文章标签：

#java #游戏 #python

本文介绍如何使用盒布局中的box-pack和box-align属性实现元素内文字、图像等内容的水平和垂直居中。通过HTML和CSS代码示例展示了具体实现方法。

部署运行你感兴趣的模型镜像

2019独角兽企业重金招聘Python工程师标准>>>

使用盒布局的时候，可以使用 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>

输入图片说明