Question

current state

what I need

如何将文字放在图标下面？我需要超链接与图标相同。当我输入文字时，它总是显示在图标的右侧。当我把
或

时，它也会影响其他图标。

HTML代码：

  <div style="margin-top:-35px">

<a href="panel.php?module=ustawienia"><img alt="" src="gfx/ustawienia.png" class="noborder"/></a><span class="imgmove"></span>

<a href="panel.php?module=zablokowane"><img alt="" src="gfx/zablokowane_strony.png" class="noborder"/></a><span class="imgmove"></span>

<a href="panel.php?module=tagi"><img alt="" src="gfx/tagi.png" class="noborder"/></a><span class="imgmove"></span>

<a href="panel.php?module=users"><img alt="" src="gfx/uzytkownicy.png" class="noborder"/></a><span class="imgmove"></span>

<a href="panel.php?module=RSSadmin"><img alt="" src="gfx/zarzadzanie_newsami.png" class="noborder"/></a><span class="imgmove"></span>

<a href="panel.php?module=narzedzia"><img alt="" src="gfx/narzedzia_wyszukiwarek.png" class="noborder"/></a><span class="imgmove"></span><p>

<a href="panel.php?module=swl"><img alt="" src="gfx/swl.png" class="noborder"/></a>

</div>

CSS code:

    .noborder{
    border:0;
    display: inline;
    text-align:center; 
}

.imgmove
{
    margin-left:40px;
}

Answer 1

我在这里找到了很好的例子：http://www.w3schools.com/css/css_image_gallery.asp

工作正常！

Answer 2

我建议您将图片文本（<span>）放在链接元素（<a>）中。这样，无论何时移动链接，文本都将跟随图像。哪个会给你这个：

<div class="container">
    <a href="#">
        <img alt="" src="..." />
        <span>Text here</span>
    </a>
    <a href="#">
        <img alt="" src="..." />
        <span>Text here</span>
    </a>
</div>

如果您随后将display:block设置为图像和文本，则文本将放在图像下方。像这样：

.container a {
    display: inline-block;
    vertical-align: top; /* Adjust if multi-line text */
    margin: 10px;
    padding: 5px;
    width: 120px;
    color: #333;
    text-align: center;
    text-decoration: none;
}
.container a img {
    display: block;
    margin: auto;
    border: 0;
}
.container a span {
    display: block;
}

这是demo on JSFiddle。

Answer 3

将每个图像包裹在一个包含2行的表中。然后将文本居中放在底行。请点击此处查看：http://jsfiddle.net/Z5X9G/

<table border=0 cellspacing=0 cellpadding=0>
    <tr>
        <td>
            <a href="panel.php?module=ustawienia">
                <img alt="" src="gfx/ustawienia.png" class="noborder" />
            </a>
        </td>
    </tr>
    <tr>
        <td style='text-align: center'>TEXT HERE</td>
    </tr>
</table>

或许您更喜欢使用div标签

<div style='text-align: center;>
    <a href="panel.php?module=ustawienia"><img alt="" src="gfx/ustawienia.png" class="noborder" /></a><br />
    TEXT HERE
</div>

把文字放在图像下面

3 个答案: