如何设置<a> tag&#39;s text is on center of image?</a>

Question

我想使用背景图像是我的按钮，文本位于按钮背景图像的中心。我用过这个：

  <li>  
    <a href="@Url.Action( "Start", "Home" )">
       <img alt = "" src="@Url.Content( "~/Content/images/buttonimage.png" )" height=23px; width=70px; />Start
    </a>
</li>

但是，“开始”文字不在图像上，它似乎在图像之后。我该怎么做？

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背景图像的一种方法。

上面的上划线示例也可以垂直居中。

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兼容性。