html - 如何设置标签的文本在图像的中心？

Answer 1

您应该使用以下代码来实现您想要的。

HTML：

<li>  
    <a href="@Url.Action( "Start", "Home" )" class="btnImg">
        Start
    </a>
</li>

CSS：

.btnImg{
     background: url(/url/of/image.png);
     width: 70px;
     height: 23px;
     text-align:center;  
}

Answer 2

为什么不使用按钮输入标签？

<input id="myButton" type="button" value="Start" onclick="location.href='~/Content/images/buttonimage.png'" />

在CSS中

input[type="button"]:active, input[type="submit"]:active
{
     background: url(/url/of/image.png);
     width: 70px;
     height: 23px;
}

Answer 3

一种使用 CSS 背景图像的方法。

上面的 Unline 示例也进行垂直居中。

IE7+兼容方法：

/* http://www.vanseodesign.com/css/vertical-centering/ CSS Table Method explained */
.imagePortlet .image-wrapper {
    display: table;
}

/* Text-over-image using relative + absolute positioning trick */
.imagePortlet .text {
    text-align: center;
    vertical-align: middle;
    display: table-cell;
}

相关的 HTML 代码。图像是在服务器端动态插入的，但如果它是静态图像，您可以简单地将宽度和高度放入.image-wrapper类中：

    <a title="" href="http://localhost" class="outer-wrapper">
        <div style="background: url(http://localhost/yourimage.png) no-repeat top left; width: 232px; height: 93px" class="image-wrapper">
            <div class="text">Text on the image here</div>
        </div>
    </a>

请注意，内联样式必须根据实际图像尺寸生成。我通过读取服务器端的图像属性来做到这一点。使用现代浏览器时，您可能会避免知道确切的图像尺寸，但随后您会失去 IE 兼容性。