将图标图像与下面的标题对齐

Question

我需要编辑这些图标类型的菜单。

我需要它们以页面为中心，并且在移动设备上也很好看。

以下是我的示例代码：

<div style="margin-left: 0 auto;">

  <div style="margin:0 auto;"> <a href="http://kutsalkitap.org/category/tartisma/"><img class="alignnone size-full wp-image-107" src="http://kutsalkitap.org/wp-content/uploads/2015/07/Blog-Icon.png" alt="tartisma-blog" width="128" height="128" /><br />Tartışma <br />Blog</a></div>

  <div style="margin:0 auto;"><a href="http://kutsalkitap.org/kaynaklar/"><img class="alignnone size-full wp-image-107" src="http://kutsalkitap.org/wp-content/uploads/2015/07/Gift-Icon.png" alt="hediyeler-kaynaklar" width="128" height="128" /><br />Hediyeler <br />ve Kaynaklar</a></div>

  <div style="margin:0 auto;"><a href="http://kutsalkitap.org/kilise-adresleri/"><img class="alignnone size-full wp-image-107" src="http://kutsalkitap.org/wp-content/uploads/2015/07/Chapel-Icon.png" alt="kilise-bul" width="128" height="128" /><br />Kilise <br />Adresleri</a></div>

  <div style="margin:0 auto;"><a href="http://kutsalkitap.org/online-kutsal-kitap/"><img class="alignnone size-full wp-image-107" src="http://kutsalkitap.org/wp-content/uploads/2015/07/Bible-Icon.png" alt="online-kutsal-kitap" width="128" height="128"/><br />Online <br />Kutsal Kitap</a></div>

</div>

这里是小提琴：https://jsfiddle.net/yjwo2eqa/

有人可以帮助我吗？

由于

Answer 1

将text-align: center;提供给最顶层的div修复了它：

<div style="margin-left: 0 auto; text-align: center;">

预览

小提琴：https://jsfiddle.net/h3ckLfx1/

Answer 2

<div style="text-align:center">

  <div style="margin:0 auto;"> <a href="http://kutsalkitap.org/category/tartisma/"><img class="alignnone size-full wp-image-107" src="http://kutsalkitap.org/wp-content/uploads/2015/07/Blog-Icon.png" alt="tartisma-blog" width="128" height="128" /><br />Tartışma <br />Blog</a></div>

  <div style="margin:0 auto;"><a href="http://kutsalkitap.org/kaynaklar/"><img class="alignnone size-full wp-image-107" src="http://kutsalkitap.org/wp-content/uploads/2015/07/Gift-Icon.png" alt="hediyeler-kaynaklar" width="128" height="128" /><br />Hediyeler <br />ve Kaynaklar</a></div>

  <div style="margin:0 auto;"><a href="http://kutsalkitap.org/kilise-adresleri/"><img class="alignnone size-full wp-image-107" src="http://kutsalkitap.org/wp-content/uploads/2015/07/Chapel-Icon.png" alt="kilise-bul" width="128" height="128" /><br />Kilise <br />Adresleri</a></div>

  <div style="margin:0 auto;"><a href="http://kutsalkitap.org/online-kutsal-kitap/"><img class="alignnone size-full wp-image-107" src="http://kutsalkitap.org/wp-content/uploads/2015/07/Bible-Icon.png" alt="online-kutsal-kitap" width="128" height="128"/><br />Online <br />Kutsal Kitap</a></div>

</div>

margin-left不是必需的，只需添加text-align:center

即可