將文字放在圖片上以適應響應頁面

我試圖在圖片上放置一些文字，但我不想設置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'？ –

將文字放在圖片上以適應響應頁面

回答

相關問題