css绝对定位后居中显示文字

最新推荐文章于 2024-08-27 13:31:19 发布

pengmingdong

最新推荐文章于 2024-08-27 13:31:19 发布

阅读量5k

点赞数

分类专栏：前端笔记文章标签： position 居中 css

本文链接：https://blog.csdn.net/qq_31648761/article/details/73992543

版权

前端笔记专栏收录该内容

37 篇文章 3 订阅

订阅专栏

在图片底部居中显示文字，直接上代码：

<style>
    .main {
        width:300px;
        height:200px;
        text-align:center;
    }
    .title {
        position:absolute;
        width:300px;
        height:20px;
        left: 0;
        right: 0;
        bottom: 0;
        background-color:rgba(0,0,0,0.5);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000);
    }
    #设置背景半透明并兼容ie浏览器
</style>
<div class="main">
    <img src="1.png" />
    <p class="title">我要在图片底部居中显示</p>    
</div>