总结了几个前端布局的技巧,作为今天的日志
- 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标签整体垂直对齐。