0

スパンを使用して画像を含むボタンを作成しようとしています。以下は機能しますが、問題はテキストが垂直方向に中央揃えになっていることですが、保存ボタンの画像はそうではありません。すべてのコンテンツを中央に垂直に配置する必要があります。コードの何が問題になっていますか?

.ButtonSPAN{
display:inline-block;
color: white;
background-color:#00537B;
border: 1px solid #1E90FF;
height: 25px;

padding:3px;
vertical-align:middle;
font-weight: bold;
}
.ButtonSPAN:hover{
color: #F0E68C;
cursor: hand; cursor: pointer;  
}

<span class="ButtonSPAN"><img src="/common/images/save.png" onclick="Save()">&nbsp;Save</span>
4

5 に答える 5

2

で利用可能なさまざまな値を示すこのフィドルを確認してくださいvertical-align。CSS の例はinline-block、親 ( .ButtonSPAN) に適用していることを示しています。

あなたが求めているものを達成する最も簡単な方法は、テキストを別のものにラップしてから、spanこれを使用することです:

<button><img src="http://placehold.it/36x36"> <span>Middle</span></button>

button {
    color: white;
    background-color:#00537B;
    border: 1px solid #1E90FF;
    padding: 3px;
    font-weight: bold;
}

img, span {
    display: inline-block;
    vertical-align: middle;
}

上記の jsFiddle のスクリーンショットを次に示します。画像を少し大きくし、バリアントをよりよく説明するためにspanaを付けました。background-color

垂直整列の例

于 2013-03-13T14:45:01.457 に答える
0

[更新]「保存」をでラップspanし、CSSに追加します

.ButtonSPAN{
    line-height:25px;
}

.ButtonSPAN *{
    vertical-align:middle; //Align everything nested in .ButtonSPAN to the middle
}

こちらのデモ

于 2013-03-13T14:12:02.337 に答える
0

テキストと画像の両方を 1 つのspan要素に保持しているため、以下のフィドルに示すように回避する必要があります。

働くフィドル

marign-bottom:-3pxここでは、テキストの真ん中に見えるように追加しました。

.ButtonSPAN img{  
   margin-bottom:-3px;  /* fix until the img comes to mid */
   width:16px;height:16px; /* giving fixed widths for demo */
}

vertical-alignまた、.ButtonSPANクラスから削除し、line-height代わりに高さの値に等しい値を追加しました。

于 2013-03-13T14:43:52.887 に答える
0

うまくいくかもしれないいくつかの考えがあります。私の最初のオプションは、画像background:url(image_path)をスパンとして配置し、高さ、幅、およびマージンを指定して適切に配置することです。複数の背景を配置して、クリックしたい場所にアンカーを追加するか、すべてのスパンをクリック可能にすることができます。2 番目のオプションは、そのイメージを と垂直に揃えることvertical-align:middleです。3 つ目は、その画像を編集して、画像の上に透明なスペースを作成することです。

これが何か役立つことを願っています！

于 2013-03-13T14:17:33.400 に答える
0

ここにはいくつかのオプションがあります。

画像を背景画像としてスパンに適用できます。

.ButtonSPAN{
    background:#00537B url(/common/images/save.png) 3px center no-repeat;
}

onClick="save()"あなたはあなたのspan要素にあなたを置く必要があります。

background-image プロパティ

または、画像の高さがわかっている場合、これは機能するはずです。

（画像の高さは16pxを想定しています）

.ButtonSPAN{
    position:relative;
}
.ButtonSPAN img{
    position:absolute;
    top:50%;
    margin-top:-8px;
}

または、代わりに、このページを見てください

PS クラス名を小文字で始めることをお勧めします。

于 2013-03-13T14:17:51.183 に答える