我在使文字响应所放置的图像时出现问题,尤其是在移动视图中。
以下是该模块在桌面/平板电脑视图中的外观:
这是在移动视图中的外观:
这里的问题是我希望移动视图中的图像框居中对齐。但是,当我将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) {
}
有什么办法可以解决文本问题?谢谢。
最佳答案
您应该将图像和文本包装在同一个容器中
关于html - 如何使图像上的文本响应,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/43049638/