前端题目练习：四块内容居于屏幕垂直居中，内容里面的图片水平对齐，上下文字高度自适应

最新推荐文章于 2022-06-09 16:26:32 发布

Growing Wild

最新推荐文章于 2022-06-09 16:26:32 发布

阅读量473

点赞数

分类专栏：前端前端题目文章标签：垂直居中水平居中 web前端、前端题目

本文链接：https://blog.csdn.net/weixin_39773631/article/details/100096529

版权

前端同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

前端题目

1 篇文章 0 订阅

订阅专栏

前端题目练习：四块内容居于屏幕垂直居中，内容里面的图片水平对齐，上下文字高度自适应

题目
- 思路
- 代码

题目

四块内容居于屏幕垂直居中，内容里面的图片水平对齐，上下文字高度自适应

思路

4块内容相对于屏幕垂直居中：实践后发现可以利用内容块里的4张图片来居中实现整个内容块垂直居中
4张图片水平对齐：li列表，使用display：flex布局
上下内容高度自适应：基于图片框绝对定位，width设置图片宽度

代码

<!DOCTYPE html>
<html>
<head>
    <title>四块内容相对浏览器水平垂直居中，文字环绕块级元素自适应</title>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">

    <style>
        *{margin: 0; padding: 0;}
        #container{
            /*width: 680px;*/
            display: flex;justify-content: center; align-items: center;}
        #container .ul-cont{}
        #container .columns{background-color: #eee;width: 150px;display: inline-block;margin-right: 20px;}
        #container .columns:last-child{
            margin-right: 0;
        }
        #container .columns .box{width: 150px; height: 100px;background-color: orange;position: absolute; top: 50%;margin-top: -50px;}
        #container .columns .box .front{width: 150px; background-color: pink; position: absolute; bottom: 100px;}
       #container .columns .box .footer{width: 150px; background-color: aqua; position: absolute; top: 100px;text-indent: 2em;}
        #container .columns .box .front .sub-title{font-size: 14px; color: red;}
    </style>
</head>
<body>
    <div id="container">
       <ul class="ul-cont">
            <li class="columns">
                <p class="box">
                    <sapn class="front">文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 <span class="sub-title">副标题副标题副标题副标题副标题副标题</span></sapn>
                    <span class="footer">文字文字文字文字文字文字文字文字文字文字文字文字</span>
                </p>
        </li>
            <li class="columns">
                <p class="box">
                    <span class="front">文字文字文字文字文字文字文字文字文字文字文字 <span class="sub-title">副标题副标题副标题副标题副标题副标题</span></span>
                    <span class="footer">文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</span>
                </p>

            </li>
           <li class="columns">
                <p class="box">
                    <span class="front">文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 <span class="sub-title">副标题副标题副标题副标题副标题副标题</span></span>
                    <span class="footer">文字文字文字文字文字文字</span>
                </p>

            </li>
             <li class="columns">
                <p class="box">
                    <span class="front">文字文字文字文字文字文字文字文字文字文字文字 <span class="sub-title">副标题副标题副标题副标题副标题副标题</span></span>
                    <span class="footer">文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</span>
                </p>

            </li>
        </ul>
    </div>
</body>
</html>
<!--  <div class="columns"><p class="front"></p><div class="box"></div><p class="footer"></p></div>
        <div class="columns"><p class="front"></p><div class="box"></div><p class="footer"></p></div>
        <div class="columns"><p class="front"></p><div class="box"></div><p class="footer"></p></div>
        <div class="columns"><p class="front"></p><div class="box"></div><p class="footer"></p></div> -->

Growing Wild

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
前端题目练习：四块内容居于屏幕垂直居中，内容里面的图片水平对齐，上下文字高度自适应

前端题目练习：四块内容居于屏幕垂直居中，内容里面的图片水平对齐，上下文字高度自适应题目思路代码题目思路4块内容相对于屏幕垂直居中：实践后发现可以利用内容块里的4张图片来居中实现整个内容块垂直居中4张图片水平对齐：li列表，使用display：flex布局上下内容高度自适应：基于图片框绝对定位，width设置图片宽度代码<!DOCTYPE html><html...
复制链接

扫一扫

专栏目录