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

我试图在图片上放置一些文字，但我不想设置background-image。将文字放在图片上以适应响应页面

我创建了一个jsfiddle来说明我做了什么，并使用了bootstrap3。

在移动的大小，它可以显示优良像

但是，如果我调整浏览器的宽度，它将被打破。

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; 
    }

来源

2016-10-11 Coda Chang

/* 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>

我把另一个类的父。（.holder）

试试这个。希望能帮助到你！

来源

2016-10-11 06:37:24

谢谢，但'margin：0 auto是什么意思？ –

将元素居中到父元素。很高兴我帮助:) –

谢谢，我知道了 –

尝试这样的事情。

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

下面是干活jsfiddle

来源

2016-10-11 06:36:22

谢谢，它的工作原理也是如此。 –

尝试如下，即.col-xs-12位置设置你的父元素为position:relative和儿童即.competion_text位置position:absolute因此这个对准在图像中心的文字，现在我已经使用CSS calc() function在顶部：放置在中心垂直对齐并始终停留在那里。

/* 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>

来源

2016-10-11 07:10:13 frnt

@Coda Chang如果这是你想要的更新。 – frnt

谢谢，它也适用。为什么将'width'，'height'和 'margin'设置为'auto'？ –

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

回答

相关问题