前端学习之旅(六)【定位元素居中】

发布时间：2024年01月17日

任务一

实现已经设计好的元素在父元素中水平方向填充满。

设计好的元素展示：

想要实现的效果：

代码

实现前的代码：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>定位元素居中</title>
    <style>
        /* 原本设计好的样式，不能修改 */
        .container {
            height: 400px;
            background-color: gray;
            position: relative;
        }
        .inner {
            background-color: orange;
            border: 10px solid black;
            padding: 20px;
            position: absolute;
        }

    </style>
</head>

<body>
    <div class="container">
        <div class="inner">居中</div>
    </div>
</body>

</html>

实现效果的代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>定位元素居中</title>
    <style>
        /* 原本设计好的样式，不能修改 */
        .container {
            height: 400px;
            background-color: gray;
            position: relative;
        }
        .inner {
            background-color: orange;
            border: 10px solid black;
            padding: 20px;
            position: absolute;
        }

        /* 添加样式，使inner水平方向填充满父元素 */
        .inner{
            left: 0;
            right: 0;
            /* 添加下面的代码可以实现充满父元素 */
            /* top: 0;
            bottom: 0; */
        }

    </style>
</head>

<body>
    <div class="container">
        <div class="inner">居中</div>
    </div>
</body>

</html>

任务二

实现已经设置好宽高的定位元素在父元素中居中

原本的样式

需要的样式

代码

实现前的代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>定位元素居中</title>
    <style>
        /* 原本设计好的样式，不能修改 */
        .container {
            height: 400px;
            background-color: gray;
            position: relative;
        }
        .inner {
            height: 100px;
            width: 200px;
            background-color: orange;
            border: 10px solid black;
            padding: 20px;
            position: absolute;
            line-height: 100px;
            text-align: center;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="inner">居中</div>
    </div>
</body>

</html>

实现后的代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>定位元素居中</title>
    <style>
        /* 原本设计好的样式，不能修改 */
        .container {
            height: 400px;
            background-color: gray;
            position: relative;
        }
        .inner {
            height: 100px;
            width: 200px;
            background-color: orange;
            border: 10px solid black;
            padding: 20px;
            position: absolute;
            line-height: 100px;
            text-align: center;
            font-size: 20px;
        }

        /* 添加样式，使inner水平方向填充满父元素 */
        .inner{
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        }

    </style>
</head>

<body>
    <div class="container">
        <div class="inner">居中</div>
    </div>
</body>

</html>

总结

定位元素居中，可以使用通常认为不正确的代码。前端需要学习的东西太多啦，还需要不断努力啊！！！

文章来源:https://blog.csdn.net/qq_62170186/article/details/135626347
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章