如何使图像上的文本具有响应性

Question

我遇到的问题是让我的文字对其放置的图片做出响应，特别是在移动视图中。

以下是模块在桌面/平板电脑视图中的显示方式：

以下是移动视图中的外观：

这里的问题是我希望移动视图中的图像框居中对齐。但是，当我将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有text-align：center时，就会出现这种情况：

我希望文字在图片中响应：

@media (max-width: 768px) {

} 

有什么方法可以解决文本问题吗？感谢。

Answer 1

您应该将图像和文本包装在同一容器中