html - タグのテキストを画像の中央に設定する方法は？

Answer 1

ボタン入力タグを使ってみませんか？

<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 2

目的を達成するには、次のコードを使用する必要があります。

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 3

CSS の背景画像を使用する方法の 1 つ。

上記の 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 との互換性が失われます。