前端tips7月23日

最新推荐文章于 2024-03-18 21:45:49 发布

苏幕遮。

最新推荐文章于 2024-03-18 21:45:49 发布

阅读量74

点赞数 1

分类专栏：前端复习日记

本文链接：https://blog.csdn.net/weixin_43267296/article/details/97008769

版权

前端复习日记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

总结了几个前端布局的技巧，作为今天的日志

flex下多行文本对齐`

css:

 <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            display: flex;
            justify-content: center;

        }
        .full{
            width: 500px;
            height:400px;
            border: 0.5px solid grey;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            flex-direction: column;
        }
        .full>div{
            width: 33%;
            height: 100px;
            border: 1px solid red;
        }

html:

<body>
<div class="full">
    <div class="t1">1</div>
    <div class="t2">2</div>
    <div class="t3">3</div>
</div>
</body>

在这里插入图片描述
这就达成了我们的目的。
要想实现同一div下多行文本居中，重要的是 flex-wrap: wrap;flex-direction: column;这两个属性

清除图片默认边距

要想清除这个默认间距，只需在img上添加 /vertical-align: bottom;/这端代码即可。
p标签内部垂直对齐方式`
要想让一个p标签在p标签内部垂直居上，居中，居底，这里有一个方法：思路是给这个p标签加上一个伪类元素：
css:

*{
            margin: 0;
            padding: 0;
        }
        .full{
            width: 600px;
            height:65px;
            border: 0.5px solid black;
        }
        .full>p{
            /*background: red;*/
            font-size: 20px;
            width: 600px;
            height: 35px;
            background: grey;
            text-align: center;
        }
        .full>p:before{
            display: inline-block;
            content:'';
            width: 0;
            height: 100%;
            vertical-align: middle;
        }

其中：伪元素中的vercital-align决定了该p标签上下对齐的方式。
在这里插入图片描述
要想使p整体在父元素中垂直对齐，父元素需要display:flex;align-items: center;
这样就完成了p标签整体垂直对齐。

苏幕遮。

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端tips7月23日

总结了几个前端布局的技巧，作为今天的日志flex下多行文本对齐`css: <style> *{ margin: 0; padding: 0; } body{ display: flex; justify-content: center...
复制链接

扫一扫