本文收录css设置样式的一些小技巧
1. 设置文字在块级标签居中(包括水平居中和垂直居中)
水平居中
方法一:使用text-align
text-align:center
方法二:目标标签的父级标签设置position:relative,目标标签设置margin:auto
.parent {
position: relative
} .target {
margin:auto
}
垂直居中
设置line-height与父级元素height相同
div {
width:200px;
height:40px;
line-height:40px
}
2. 块级元素在其父级元素内部居中
方法:利用绝对定位
步骤:(1)设置父级元素的position: relative(absolute也可以)
(2)设置目标元素的margin值为auto
(3)设置目标元素的left与right值相同,top与bottom值相同
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素居中</title>
<style>
.box1 {
width: 50%;
height: 300px;
position: relative;
background-color: #71b639;
}
.box2 {
width: 200px;
height: 200px;
background-color: #ed6962;
/*只设置设置auto只能达到水平居中的效果*/
/*margin: auto;*/ position: absolute;
margin: auto;
/*这里不一定要设置为0,只要对应的值相同即可*/
left: 0;
right: 0;
top: 500px;
bottom: 500px;
}
</style>
</head>
<body> <div class="box1">
<div class="box2"></div>
</div> </body>
</html>
效果
3. 表格内文字垂直居中
<style>
.class {
vetical-align: middle
}
</style>
补充:vertical-align定义行内元素的基线相对于该元素所在行的基线的垂直对齐方式
top: 顶部对齐
middle: 居中对齐
bottom: 底部对齐
持续更新中...