图片上面的文字居中方法之一

<div class="one_row rel">
        <img src="img/topics_1.png" alt="">
        <div class="desc">
            网聊大师
        </div>
</div>

 

css

.topics_box .one_row .desc {
    width: 100%;
    text-align: center;
    position: absolute;
    top: 50%;
    color: #fff;
    height: 24px;
    font-size: 24px;
    margin-top: -12px;
}

 

思路：给文字图层一个高度，margin-top：-0.5*height

适用于图片的高度不能固定的情况

 

把图片作背景，文字line-height:height;text-align:center 也是一种方法