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

你没有调整你的＆＃34; Nav＆＃34;在任何地方。

Answer 2

所以，我已将id =“content”更改为类，因为ID应该是页面唯一的。将nav元素设置为text-align：center。这是一个小提琴，以及相关的代码：

http://jsfiddle.net/cw16tkdn/2/

<nav>
    <div class="content">
        <img src="http://placekitten.com/g/200/200" />
        <div class="text"><a href="#">Utvecklingen sedan 90-talet</a>

        </div>
    </div>
    <div class="content">
        <img src="http://placekitten.com/g/200/200" />
        <div class="text"><a href="#">HTML5</a>

        </div>
    </div>
    <div class="content">
        <img src="http://placekitten.com/g/200/200" />
        <div class="text"><a href="#">HTML5 Video</a>

        </div>
    </div>
    <div class="content">
        <img src="http://placekitten.com/g/200/200" />
        <div class="text"><a href="#">Responsive Webdesign</a>

        </div>
    </div>
    <div class="content">
        <img src="http://placekitten.com/g/200/200" />
        <div class="text"><a href="#">Emotional Design</a>

        </div>
    </div>
</nav>

和CSS：

nav {
    text-align:center;
}
.content {
    display: inline-block;
    text-align: center;
}
.content img {
    width: 100px;
}
.text {
    font-size: 12px;
    font-family:'ciclethin';
    text-decoration: none;
}

Answer 3

也许你想要这个:(我已经用html代码更改了id = content = content = content的内容！）

.content {
    position: relative;
    width: 100px;
    display: inline-block;
    height: 520px;
    text-align: center;
    vertical-align:bottom; 

}

.content img    {
    padding-top: 370px;
    width: 100px;
    display:block;
    margin: auto;
}

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

.text {
    height: 3em; 

}

将文本居中作为菜单

3 个答案: