html - 以文本为菜单居中图像

Question

我试图将一些图像与图像下方的文本放在一起，这些图像将用作菜单，应该在标题下方水平居中。该网站应该作为响应式网站工作。 HTML 和 CSS 代码目前看起来像这样:

已编辑

我想要 5 张图片，每张图片下面都有一段文字。我希望我的图像和文本一起居中。

HTML

<nav>
<div id="content">
<img src="ikoner/icon_90_2.png"/>
<div class="text"><a href="#">Utvecklingen sedan 90-talet</a></div>
</div>

<div id="content">
<img src="ikoner/icon_html5.png"/>
<div class="text"><a href="#">HTML5</a></div>
</div>

<div id="content">
<img src="ikoner/icon_html5video.png"/>
<div class="text"><a href="#">HTML5 Video</a></div>
</div>

<div id="content">
>img src="ikoner/icon_responsive.png"/>
<div class="text"><a href="#">Responsive Webdesign</a></div>
</div>

<div id="content">
<img src="ikoner/icon_heart.png"/>
<div class="text"><a href="#">Emotional Design</a></div>
</div>    
</nav>

CSS

#content {
position: relative;
width: 15%;
display: inline-block;
text-align: center;
margin-left: auto;
margin-right: auto;

}

#content img    {
padding-top: 370px;
width: 100px;
}

.text   {
font-size: 12px;
font-family: 'ciclethin';
text-decoration: none;
}

Answer 1

您没有在任何地方对齐“Nav”div。