css---块级盒子水平居中与盒子里的文本居中

最新推荐文章于 2024-07-14 22:21:09 发布

Zoe Din

最新推荐文章于 2024-07-14 22:21:09 发布

阅读量763

点赞数

分类专栏： Web前段学习笔记

本文链接：https://blog.csdn.net/naturly/article/details/104176247

版权

Web前段学习笔记专栏收录该内容

10 篇文章 1 订阅

订阅专栏

块级盒子水平居中条件：

（1）盒子必须要有宽度

（2）盒子左右外边距设置为auto

margin-left: auto;

margin-right: auto;

如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外边距</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
            margin-left: auto;
            margin-right: auto;

        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

2、盒子内容文本居中对齐 text-align: center;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外边距</title>
    <style>
        div{
            width: 600px;
            height: 300px;
            background-color: pink;
            /*盒子居中对齐*/
            margin-left: auto;
            margin-right: auto;
            /*盒子内容文本居中对齐*/
            text-align: center;

        }
    </style>
</head>
<body>
<div>apple</div>
</body>
</html>

Zoe Din

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css---块级盒子水平居中与盒子里的文本居中

块级盒子水平居中条件：（1）盒子必须要有宽度（2）盒子左右外边距设置为automargin-left: auto;margin-right: auto;如：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title&...
复制链接

扫一扫

专栏目录