将文字放在图片上以适合响应页面

Question

I was trying to put some text over a picture, but I don't want to set background-image .

I've created a jsfiddle to illustrate what I did, and I use bootstrap3.

In the mobile size, it can display fine like

But if I resize the browser width, it will be broken.

html

<div class="col-xs-12 visible-sm-block visible-xs-block" style="text-align: center;">
    <p class="competion_text">
        This is inside the competiontion Box!
        <br> Second line
        <br> Third line
    </p>
    <img src="http://i.imgur.com/NajXOdH.png">
</div>

CSS

.competion_text {
        text-align: center;
        position: relative;
        top: 252px;
        left: 7px;
        max-width: 225px;
        color: #FFCF83;
        font-size: 10pt;
    }

Answer 1

Try something like this.

.competion_text {
    text-align: center;
    position: relative;
    top: 252px;
    margin: 0 auto;
    max-width: 225px;
    color: #FFCF83;
    font-size: 10pt;
}

Here is workin jsfiddle

Answer 2

 /* Latest compiled and minified CSS included as External Resource*/ /* Optional theme */ @import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); .holder { position: relative; width: 230px; margin: 0 auto; } .competion_text { position: absolute; top: 180px; left: 0; width: 100%; text-align: center; color: #FFCF83; font-size: 10pt; z-index: 2; } 

 <div class="col-xs-12 visible-sm-block visible-xs-block holder" style="text-align: center;"> <p class="competion_text"> This is inside the competiontion Box! <br> Second line <br> Third line </p> <img src="http://i.imgur.com/NajXOdH.png"> </div> 

I put another class on the parent. (.holder)

Try this. Hope it helps!

Answer 3

Try as below, Set your parent element ie .col-xs-12 position as position:relative and child ie .competion_text position as position:absolute thus this aligns your text in the center of image, Now I have used CSS calc() function in top positing to align it vertically in center and that always stays there.

 /* Latest compiled and minified CSS included as External Resource*/ /* Optional theme */ @import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); .col-xs-12{ width:auto; height:auto; margin:auto; text-align:center; position:relative; } .col-xs-12 > .competion_text { position: absolute; top: calc(100% - 30%); left: 0; width: 100%; height:auto; color: #FFCF83; font-size: 10pt; text-align:center; } 

 <div class="col-xs-12 visible-sm-block visible-xs-block"> <p class="competion_text"> This is inside the competiontion Box! <br> Second line <br> Third line </p> <img src="http://i.imgur.com/NajXOdH.png"> </div>