1

純粋なCSSでボタンを作成しようとしていますが、さまざまな要素の配置に見事に失敗しています。これはおそらく簡単ですが、頭を悩ませることはできません。外観は次のとおりです。

ここに画像の説明を入力してください

ボタンには、テキストと画像の両方が含まれている必要があります。両方とも垂直方向の中央に配置する必要があります。それらの両方を一緒に水平方向に中央に配置する必要があります。

どちらかを単独で動作させることはできますが、両方を同時に動作させることはできません。

私はこれを行うための最良の方法についてのガイダンスを本当に探していますが、これまで私が使用しているものを、可能な限り単純化して示します。

<span style="display:table; text-align:center;">
<span style="display:table-cell; position:relative; ">
    <a href=… >
        <img style="position:absolute; top:50%; margin-top:-#{ height / 2}px"></img>
    </a>
</span>
    <a href=… > TEXT </a>
</span>

そしてこれが現在の結果です。

ここに画像の説明を入力してください

アイコンがさらに右側にあり、テキストも少し右側にあることに注意してください。私の現在の理解では、アイコンに絶対位置合わせを使用するとフローからアイコンが削除されるため、現在はデッドセンターになっています。

（ERBを介してHTMLを生成したことによる奇妙な変数のいくつか。）

4

2 に答える 2

3

buttonテキストと画像を含むだけで使用できます。ボタンの内容を垂直方向に揃え、パディングを追加します。

<button><span><img src="http://placehold.it/25x25">Some Text</span></button>​

button{
    padding: 1em 2em;
}
img, span{
    vertical-align:middle;
}

デモ

于 2012-12-21T02:49:29.677 に答える
0

このHTMLを検索しましたか：

<html>
<head>
<style>
    .icon_button{
        background:#FFFFFF url(http://www.limitedlink.com/images/png/ico.png) no-repeat 4px 4px;
        padding:4px 4px 4px 22px;
        height:auto;
    }
</style>

</head>
<body>
    <input type="button" value="halo" class="icon_button" />
</body>
</html>
于 2012-12-21T02:51:23.030 に答える