垂直居中
未知父元素高度
.parentElement {
display: block;
&:before {
content: " ";
display: inline-block;
vertical-align: middle;
height: 100%;
}
.childElement {
display: inline-block;
vertical-align: middle;
}
}
已知父元素高度
.parentElement {
height: xxx;
.childElement {
position: relative;
top: 50%;
transform: translateY(-50%);
}
}
Flex布局
.parentElement{
display: flex;
align-items: center
}
Table
.parentElement {
display: table;
.childElement {
display: table-cell;
vertical-align: middle;
}
.grandsonElement {}
}
消除图片下方间隙
通过设置给 img 元素设置 vertical-align: top 消除行内元素的间隙(仅对 img 元素有用)
vertical-align: baseline;
vertical-align: top; //切换查看效果
图文居中
img{
vertical-align: middle;
}
三角形边框
// 带边框的三角形
.border-triangle{
width: 0;
height: 0;
border-style: solid;
border-width: 0 50px 50px 50px;
position:relative;
border-color: transparent transparent #fff transparent;
&::before{
content:'';
border-style: solid;
border-width: 0 52px 52px 52px;
border-color: transparent transparent #00adb5 transparent;
position: absolute;
left:-52px;top:-1px;
z-index: -1;
}
}