CSS元素垂直居中
时间:2021-04-21
来源:互联网
今天PHP爱好者为您带来CSS让人头疼的问题就是垂直居中。实现垂直居中好几种方式,但每一种方式都有一定的局限性,所以垂直居中可以根据实际的业务场景来使用。希望对大家有所帮助。
CSS让人头疼的问题就是垂直居中。实现垂直居中好几种方式,但每一种方式都有一定的局限性,所以垂直居中可以根据实际的业务场景来使用。
1.容器里面的内容只有一行文字
<!DOCTYPE html>
<html>
<style>
* {
padding: 0;
margin: 0;
}
div {
height: 60px;
background-color: #1888fa;
color: white;
}
span {
line-height: 60px;/* 设置一个大的行高,让它等于理想的容器高度。
这样会让容器高度扩展到能够容纳行高。如果内容不是行内元素,可以设置为inline-block。 */
}
</style>
<body>
<div>
<span>测试</span>
</div>
</body>
</html>2.容器自然高度
CSS中最简单的垂直居中方法是给容器相等的上下内边距,让容器和内容自行决定自己的高度。看下面的例子, 通过设置
padding-top
和padding-bottom
相等的值,让内容在父容器垂直居中。<!DOCTYPE html>
<html>
<style>
* {
padding: 0;
margin: 0;
}
div {
padding-top: 20px;
padding-bottom: 20px;
background-color: #1888FA;
color: white;
}
</style>
<body>
<div>
<span>测试</span>
</div>
</body>
</html>3.使用 FlexBox
<!DOCTYPE html>
<html>
<style>
* {
padding: 0;
margin: 0;
}
div {
height: 60px;
display: flex;
align-items: center;
justify-content: center;
background-color: #1888fa;
color: white;
}
</style>
<body>
<div>
<span>测试</span>
</div>
</body>
</html>以上就是CSS元素垂直居中的详细内容,更多请关注php爱好者其它相关文章!
-
永劫无间多少钱一个红 时间:2024-12-20
-
永劫无间多少钱开一个箱子 时间:2024-12-20
-
阿瑞斯病毒2火铳弹药怎么获得?阿瑞斯病毒2火铳弹药获得方法 时间:2024-12-19
-
阿瑞斯病毒2哈士奇在哪?阿瑞斯病毒2哈士奇获得方法 时间:2024-12-19
-
寻道大千反击流阵容推荐 时间:2024-12-19
-
和平精英性别怎么换?和平精英性别转换方法 时间:2024-12-19
今日更新
-
php提示Array怎么办
阅读:18
-
详解PHP7 OpenSSL DES
阅读:19
-
javascript如何删除数组元素
阅读:22
-
最简单的WordPress手动输入页号并跳转翻页的方法
阅读:19
-
linux如何配置php环境变量
阅读:18
-
用css3实现一个奥运五环
阅读:20
-
javascript中this的用法有哪些
阅读:19
-
php错误日志怎么看
阅读:19
-
css图片如何设置上边框距离
阅读:20
-
css怎么用三种方法设置透明度
阅读:19