如何使圖片上的文字具有響應性

我遇到了使文字響應其放置的圖像的問題，特別是在移動視圖中。如何使圖片上的文字具有響應性

這裏是模塊的外觀在臺式機/平板電腦的看法：

這裏是它的外觀在移動視圖：

這裏的問題是，我希望移動視圖中的圖像框中心對齊。但是，當我將div與圖像對齊時，文本仍然位於左側，並且沒有響應。

我不完全確定如何調整我的代碼，使文本與圖像響應，但這裏是我對這些相應元素的代碼。

.cssHotelBox { 
    position: relative; 
} 

.pickgradient{ 
    position:relative; 
    display:inline-block; 
} 

.pickgradient:after { 
    content:''; 
    position:absolute; 
    top:0; 
    margin-top: 99px; 
    left: 1px; 
    width:221px; height:50%; 
    display:inline-block; 
    background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.70) 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.70)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.70) 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.70) 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.70) 100%); /* IE10+ */ 
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.70) 100%); /* W3C */ 
} 

.cssHotelImage { 
    height: 160px; 
    width: 223px; 
    border: solid 1px #FFF; 
    margin-top: 40px; 
} 

.cssHotelText { 
    color: #FFF; 
    font-size: 14px !Important; 
    position: absolute; 
    top: 160px; 
    left: 8px; 
} 

.cssHotelCity { 
    color: #FFF; 
    font-family: inherit; 
    font-size: 11px !Important; 
    position: absolute; 
    top:180px; 
    font-weight: 100 !Important; 

    display: flex; 
    align-items: center; 
    align-content: center; 
    justify-content: center; 
    flex-grow: 1; 
    flex-shrink: 1; 
    flex-basis: auto; 
} 

.starRating { 
    display:inline-block; 
    width:60px; 
    height:11px; 
    background:transparent url(../images/star-sprites.png) no-repeat scroll; 
    margin-left: 6px; 
    margin-right: 2px; 
}

當我做.cssHotelBox有文本對齊：中心，這是它的顯示方式：

我想文後，在圖像內的響應：

@media (max-width: 768px) { 

}

有什麼辦法可以解決問題的文字？謝謝。

來源

2017-03-27 Asem H

你試圖使相對圖像位置，這樣的絕對文本位置是相對於他們的父母中的文本？ –

@MikeDiglio圖像如何成爲家長？ –

意味着圖像和文本的容器（如果他有一個，並不是100％肯定，因爲沒有包含html） –

你應該換行的形象和相同的容器

來源

2017-03-27 14:50:49

哦哇，即時通訊這樣的混亂。我甚至沒有意識到我沒有把它們放在同一個容器中......那個技巧 –

很高興幫助蜘蛛俠！ –

如何使圖片上的文字具有響應性

回答

相關問題