我在使文字响应所放置的图像时出现问题,尤其是在移动视图中。

以下是该模块在桌面/平板电脑视图中的外观:

html - 如何使图像上的文本响应-LMLPHP

这是在移动视图中的外观:

html - 如何使图像上的文本响应-LMLPHP

这里的问题是我希望移动视图中的图像框居中对齐。但是,当我将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时,它是这样显示的:

html - 如何使图像上的文本响应-LMLPHP

我希望以下文字在图像中响应:

@media (max-width: 768px) {

}


有什么办法可以解决文本问题?谢谢。

最佳答案

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

关于html - 如何使图像上的文本响应,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/43049638/

10-12 12:26
查看更多