html:如何改变文字在图片中的位置

     文字在图片中的位置常出现底部中央，正中间。我们就以这两种位置介绍改变文字在图片的位置。

     这种情况，我们应将图片占满整个父级元素，使文字出现在图片里，然后设置css改变文字的位置，而在这里使用position属性最好，接下来是html与css代码：

html代码：

<div class="container">

        <img src="../imag/mao.jpg" alt="">

        <p>猫眼电影</p>

    </div>

css代码：

 .container{

            width: 300px;

            height: 300px;

            position: relative;

        }

        .container>img{

            width: 100%;

            height: 100%;

        }

        p{

            position: absolute;

            bottom: 0;

            text-align: center;

            width: 100%;

        }

       父级元素添加position：relative，使添加了position：absolute的子元素可以相对于父级元素随意改变位置，而p选择器里的widh：100%使p标签不会只呈现文字的大小，从而实现居中，而其他的位置只需要改变top，right，left等的属性值，其中，属性值最好使用百分比，如居于正中间，可以写成top：50%，right：50%。

       友情提示：图片中的文字不改变字体的粗细，是很不好看的，最好用font-height属性改变一下。