使横向排列的几个块在浏览器页面放缩之后总体上保持水平居中

最新推荐文章于 2021-10-10 11:52:03 发布

chenyj311

最新推荐文章于 2021-10-10 11:52:03 发布

阅读量251

点赞数

文章标签： css

本文链接：https://blog.csdn.net/qq_41816362/article/details/105881474

版权

1. 项目需求

做一个搜索报错的界面。类似于下面这个。按照做好的ui，页面显示的是左侧一个图片，右侧是报错说明。中间为固定的间隔。
在这里插入图片描述

这是我入职后要实现的第一个需求（因为刚入职，除了自己写的比较简单的项目外没有项目经历，所以让我做了）。

2. 初始思路及发现的问题

最开始我设置了两个块，一个设置背景图，另一个包含所有的说明文字。然后我根据给好的网页ui标准中的各个距离，直接给两个块绝对定位。在页面没有放缩的情况下图片和文字整体是居中的。但放缩后就就不居中了，比较难看。
在这里插入图片描述

后来我用一个新的块包含原来两个块，并计算好宽度，然后给外层的块设置样式margin: 0 auto;。
在这里插入图片描述

然而放缩后，右边包含文字的块明显不是等比例放缩的，整体居中失败。
在这里插入图片描述

3. 最后方案

至此，这个问题可以简单化为：有三个块，左侧（图片）和中间（间隔）两个块的宽度是固定的，但右侧（文字说明）的块的宽度可能会变动，怎么保证三个块在整体上在水平方向上保持水平居中？

最后我想到了flex布局。设置容器属性justify-content: center;，问题解决。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>11</title>
    <style>
        .container{
            margin-top: 100px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .left{
            width: 100px;
            height: 100px;
            background: url("./img/1.jpg") no-repeat;
            background-size: 100% 100%;
            flex: 0 0 100px;
        }
        .middle{
            flex: 0 0 50px;
        }
        .right{
            flex: 0 0;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="left"></div>
    <div class="middle"></div>
    <div class="right">
        <p>aaa</p>
        <p>bbbbbbbbbbbbbbbb</p>
        <p>cccccccccc</p>
        <p>ddddddd</p>
    </div>
</div>
</body>
</html>