html - 如何创建这种平铺页面布局？

Question

我发现 HTML/CSS 组合可以完成其中一项或多项任务，但没有一个组合可以同时完成所有这些任务。基本上我想要:

• 包含六个图 block 的图 block 式菜单
• 每个图 block 都有固定的高度和宽度(可能是 10em - 正方形)
• 在不创建更大图 block 的情况下换行文本(行高有此问题)
• 图 block 的背景颜色，但右侧和下方有空白(边距)
• 所有文本垂直和水平居中
• 用于较小显示器的包裹图 block

基本上我正在寻找像按行折叠选项 here 这样的东西但使用居中文本(WordPress 似乎无法识别 @breakpoint 规则，所以它对我不起作用)。我已经尝试了各种显示方法:table/table-cell、display:inline-block、position:absolute/relative 和不同的元素类型(div、a、p、tables...)，但无法获得任何满足上面列出的所有标准。有人有解决方案吗(最好只使用标准 HTML 和 CSS，以便在 WordPress 中轻松实现)？

以下是我尝试过的方法之一的示例。示例一显示了我希望它的外观(具有更好的配色方案和正确的链接样式)，除了较小的图 block 和换行文本。示例二具有换行文本，但由于使用了行高，具有换行文本的图 block 高度加倍。

.big a {
display:inline-block; width:15em; line-height:15em; text-align:center; background-color:#FFC107; padding:10px; margin-bottom:10px; margin-right:10px;
}

.small a {
display:inline-block; width:10em; line-height:10em; text-align:center; background-color:#FFC107; padding:10px; margin-bottom:10px; margin-right:10px;
}

<p><strong>Example one</strong></p>

<div class="big"><a><strong>Language change</strong></a><a><strong>Language diversity</strong></a><a><strong>Language and the media</strong></a><a><strong>Language and gender</strong></a><a><strong>Child language acquisition</strong></a><a><strong>Discoures and attitudes</strong></a></div>

<p><strong>Example two</strong></p>

<div class="small"><a><strong>Language change</strong></a><a><strong>Language diversity</strong></a><a><strong>Language and the media</strong></a><a><strong>Language and gender</strong></a><a><strong>Child language acquisition</strong></a><a><strong>Discoures and attitudes</strong></a></div>

Answer 1

像这样的东西怎么样...使用 display:flex 和 align-items: center;

注意:可能与某些较旧的网络浏览器不兼容。

.small{
  display:flex;
  flex-wrap:wrap;
}

.small a {
display:flex; align-items: center; height:10em; width:10em; text-align:center; background-color:#FFC107; margin-bottom:10px; margin-right:10px; padding:30px; box-sizing:border-box;
}

<p><strong>Example two</strong></p>

<div class="small">
<a><strong>Language change</strong></a>
<a><strong>Language diversity</strong></a>
<a><strong>Language and the media</strong></a>
<a><strong>Language and gender</strong></a>
<a><strong>Child language acquisition</strong></a>
<a><strong>Discoures and attitudes</strong></a>
</div>