Html 在平铺中对齐文本/图片

在左边你们可以看到我的当前状态，在右边我使用了一个图像编辑程序来显示我想要的瓷砖的样子。我尝试过一点，但是每次我尝试添加例如“xxx”文本时，整个磁贴都被上移了。如果有人能帮我解决，我会很感激的

.main{
宽度：100%；
填充顶部：10px；
垫底：10px；
背景色：#AAAAA；
}
.main.内部{
填充物：5px；
字体大小：0px；
显示：表格；
左边距：自动；
右边距：自动；
}
.main.内部：悬停{
不透明度：0.8；
背景色：#2e8bcc；
}
.地砖h2{
字体大小：20px；
颜色：#FFF；
字体系列：“Helvetica Neue”，无衬线；
字号：100；
线高：1.1；
文本对齐：居中；
}
.瓷砖{
边际：0px；
填充：0px；
高度：190px；
宽度：190px；
边框：5px实心#AAAAA；
不透明度：8；
背景色：#2980b9；
显示：内联块；
}
.身体{
背景色：#AAAAA；
}

名字1
名称2
名字3
名字4
名字5
姓名6
姓名6
姓名7

我看你的代码没有任何问题。我只补充了一点

.tile {
  font-size: 16px;
  color: #fff;
  text-align: center;
}

---

.main{
宽度：100%；
填充顶部：10px；
垫底：10px；
背景色：#AAAAA；
}
.main.内部{
填充物：5px；
字体大小：0px；
显示：表格；
左边距：自动；
右边距：自动；
}
.main.内部：悬停{
不透明度：0.8；
背景色：#2e8bcc；
}
.地砖h2{
字体大小：20px；
颜色：#FFF；
字体系列：“Helvetica Neue”，无衬线；
字号：100；
线高：1.1；
文本对齐：居中；
}
.瓷砖{
边际：0px；
填充：0px；
高度：190px；
宽度：190px；
边框：5px实心#AAAAA；
不透明度：8；
背景色：#2980b9；
显示：内联块；
字体大小：16px；
颜色：#fff；
文本对齐：居中；
}
.身体{
背景色：#AAAAA；
}

名字1
xxxxx
名称2
xxxxx
名字3
xxxxx
名字4
xxxxx
名字5
xxxxx
姓名6
xxxxx
姓名6
xxxxx
姓名7
xxxxx

只需将

float:left

添加到

.tile

div，它就可以正常工作了

.main{
宽度：100%；
填充顶部：10px；
垫底：10px；
背景色：#AAAAA；
}
.main.内部{
填充物：5px；
字体大小：0px；
显示：表格；
左边距：自动；
右边距：自动；
}
.main.内部：悬停{
不透明度：0.8；
背景色：#2e8bcc；
}
.地砖h2{
字体大小：20px；
颜色：#FFF；
字体系列：“Helvetica Neue”，无衬线；
字号：100；
线高：1.1；
文本对齐：居中；
}
.瓷砖{
浮动：左；
边际：0px；
填充：0px；
高度：190px；
宽度：190px；
边框：5px实心#AAAAA；
不透明度：8；
背景色：#2980b9；
显示：内联块；
}
.身体{
背景色：#AAAAA；
}

名字1
xxxxxx
名称2
名字3
名字4
名字5
姓名6
姓名6
姓名7

您应该添加.tile img{margin left:15px；}使其居中。问题是，例如，当1个tile上缺少名称或文本“xxx”时，该tile会上移。我希望他们有相同的立场。