Css 将文本从平铺的中心移动到顶部（带有屏幕截图）

第一次来这里。我在一个露营地工作，基本上是在业余时间自学代码。我创建了一些基本的网页，然后修改了一个模板来满足我的需要。在过去的一周里，我有一个很好的观点，但我希望将文本从图像的中心移到顶部的中心。基本上只是为了让它可读。下面是它现在的样子：

我希望这对你们来说是一个简单的解决办法。我知道如何改变文本的颜色，以后我会这样做。感谢您的帮助，希望我已经提供了足够的信息

/*瓷砖*/
.瓷砖{
显示：-moz flex；
显示：-webkit flex；
显示：-ms flex；
显示器：flex；
-moz-flex-wrap:wrap；
-webkit柔性包装：包装；
-ms-flex-wrap:wrap；
柔性包装：包装；
职位：亲属；
保证金：-2.5em 0-2.5em；
}
.瓷砖制品{
-moz变换：-moz变换0.5s平滑度，不透明度0.5s平滑度；
-webkit转换：-webkit转换0.5s轻松，不透明度0.5s轻松；
-ms变换：-ms变换0.5s平滑度，不透明度0.5s平滑度；
过渡：变换0.5s缓变，不透明度0.5s缓变；
位置：相对位置；
宽度：钙（33.33333%-2.5em）；
保证金：2.5em 0.02.5em；
}
.tiles文章>.image{
-moz转换：-moz转换0.5s轻松度；
-webkit转型：-webkit转型0.5s轻松；
-ms转换：-ms转换0.5s轻松度；
转型：转型0.5s轻松；
位置：相对位置；
显示：块；
宽度：100%；
边界半径：4px；
溢出：隐藏；
}
.tiles文章>.image img{
显示：块；
宽度：100%；
}
.tiles文章>.image:之前{
-moz指针事件：无；
-webkit指针事件：无；
-ms指针事件：无；
指针事件：无；
-moz过渡：背景色0.5s缓和，不透明度0.5s缓和；
-webkit过渡：背景色0.5s缓和，不透明度0.5s缓和；
-ms过渡：背景色0.5s缓和，不透明度0.5s缓和；
过渡：背景色0.5s缓和，不透明度0.5s缓和；
内容：''；
显示：块；
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
不透明度：1.0；
z指数：1；
不透明度：0.8；
}
.tiles文章>.image:之后{
-moz指针事件：无；
-webkit指针事件：无；
-ms指针事件：无；
指针事件：无；
-moz过渡：不透明度0.5s；
-webkit过渡：不透明度0.5s；
-ms转换：不透明度0.5s；
过渡：不透明度0.5s；
内容：''；
显示：块；
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景图片：url(“数据：image/svg+xml；charset=utf8，%3Csvg xmlns=”http://www.w3.org/2000/svg“width='100'height='100'viewBox='0 100'preserveApectratio='none'%3E%3Cstyle%3Eline%7B笔划宽度：0.25px%3B笔划：%23ffffff%3B%7D%3C/笔划%3E%3C线条x1='0'y1='0'x2='100'y2='100'/%3E%3C线条x1='100'y1='0'y1='0'x2='0'y2='0'y2='100'/%3E/svg%3E”）；
背景位置：中心；
背景重复：无重复；
背景大小：100%100%；
不透明度：0.25；
z指数：2；
}
.tiles文章>a{
显示：-moz flex；
显示：-webkit flex；
显示：-ms flex；
显示器：flex；
-moz-flex方向：列；
-webkit柔性方向：列；
-ms-flex方向：列；
弯曲方向：立柱；
-moz对齐项目：居中；
-webkit对齐项目：居中；
-ms对齐项目：居中；
对齐项目：居中；
-moz-justify-content:center；
-webkit内容：中心；
-ms内容：中心；
证明内容：中心；
-moz变换：背景色0.5s轻松，-moz变换0.5s轻松；
-webkit转换：背景色0.5s轻松，-webkit转换0.5s轻松；
-ms转换：背景色0.5s轻松，-ms转换0.5s轻松；
变换：背景色0.5s轻松，变换0.5s轻松；
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
填充：1em；
边界半径：4px；
边界底部：0；
颜色：#ffffff；
文本对齐：居中；
文字装饰：无；
z指数：3；
}
.tiles文章>a>：最后一个孩子{
保证金：0；
}
.tiles文章>a:悬停{
颜色：#ffffff！重要；
}
.tiles文章>a h2{
保证金：0；
}
.tiles文章>a.内容{
-moz过渡：最大高度0.5s缓和，不透明度0.5s缓和；
-webkit过渡：最大高度0.5s缓和，不透明度0.5s缓和；
-ms过渡：最大高度0.5s缓和，不透明度0.5s缓和；
过渡：最大高度0.5s缓和，不透明度0.5s缓和；
宽度：100%；
最大高度：0；
线高：1.5；
边缘顶部：0.35em；
不透明度：0；
}
.tiles文章>a.content>：最后一个孩子{
页边距底部：0；
}
.tiles article.style1>.image:before{
/*背景色：#f2849e*/
背景图片：url（images\one-man-tent.jpg）；
}
.tiles article.style2>。图像：之前{
/*背景色：#7ecaf6*/
背景图片：url（images\two-man-tent.jpg）；
}
.tiles article.style3>。图像：之前{
/*背景色：#7bd0c1*/
背景图片：url（images\group tent.jpg）；
}
.tiles article.style4>。图像：之前{
/*背景色：#c75b9b*/
背景图像：url（images\camping gear.jpg）；
}
.tiles article.style5>。图像：之前{
/*背景色：#ae85ca*/
背景图像：url（images\camping checklist.jpg）；
}
.tiles article.style6>。图像：之前{
/*背景色：#8499e7*/
背景图片：url（images\campsites.jpg）；
}
正文：非（.is touch）.tiles文章：hover>.image{
-moz变换：比例（1.1）；
-webkit转换：比例（1.1）；
-ms变换：比例（1.1）；
转换：比例（1.1）；
}
正文：非（.is touch）.平铺文章：悬停>.image:before{
背景色：#333333；
不透明度：0.35；
}
正文：非（.is touch）.平铺文章：悬停>.image:after{
不透明度：0；
}
正文：不是（.is touch）。平铺文章：hover.content{
最大高度：15公分；
不透明度：1；
}
*+瓷砖{
边缘顶部：2米；
}
body.is-loading.tiles物品{
-moz变换：比例（0.9）；
-webkit变换：比例（0.9）；
-ms变换：标度（0.9）；
变换：比例（0.9）；
不透明度：0；
}
body.is-touch.ar