HTML关于居中的问题

最新推荐文章于 2023-02-18 18:42:34 发布

刘小芬

最新推荐文章于 2023-02-18 18:42:34 发布

阅读量524

点赞数

分类专栏： HTML5 CSS3 文章标签： html css

本文链接：https://blog.csdn.net/yatouxiaofen/article/details/77573710

版权

HTML5 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

CSS3

2 篇文章 0 订阅

订阅专栏

1： margin:0 auto;方式–>设置当前层在父级层中居中

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            body{
                text-align: center;
            }
            #box{
                width: 720px;
                height: 250px;
                margin: 0 auto;
                border: 1px solid #FF0000;
            }
        </style>
    </head>
    <body>
        <div id="box"></div>
    </body>
</html>

2：定位方式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #box{
                width: 720px;
                height: 250px;
                position: relative;
                left: 50%;
                margin-left: -360px;
                border: 1px solid #FF0000;
            }
        </style>
    </head>
    <body>
        <div id="box"></div>
    </body>
</html>

3：水平居中

.test1 ul {
    margin: 0 auto;
}

4：垂直居中

.test2 {
    position: relative;
}
.test2 ul {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(0, -50%);
}

5：水平垂直居中

.test3 {
    position: relative;
}

.test3 ul {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

6：文字居中text-align、line-height

文字在div中左右居中：

text-align:center

文字在div中垂直居中：

line-height值为外边框的高度

7：图片居中vertical-align

可设置图片

vertical-align:middle

刘小芬

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML关于居中的问题

HTML中实现居中
复制链接

扫一扫

专栏目录

HTML关于居中的问题

“相关推荐”对你有帮助么？