画像を垂直方向に中央に配置できません

私は送信ボタンになる画像を垂直方向に中央に配置しようとしています。私は、このHTML画像を垂直方向に中央に配置できません

<div style="display:inline-block; vertical-align:middle"><input alt="Search" type="image" src="/assets/magnifying-glass-0220f37269f90a370c3bb60229240f2ef2a4e15b335cd42e64563ba65e4f22e4.png" class="search_button"></div>

してから画像が、画像はまだDIVの上揃えにする

.search_button { 
     vertical-align: middle; 
}

に結び付けられ、このクラスを持っています。画像は途中で壊れていますが、上部に一列に並んだ代替テキストが表示されます - https://jsfiddle.net/hLn6fv49/。縦に並べるにはどうすればいいですか？

出典

2016-08-23 Anonymous

[CSSに中心に事実上ガイド（https://css-tricks.com/centering-css-complete-guide/） – neilsimp1

Iは、その全体がこのガイドを読み、答えはありません。 –

すべてのdivを揃える必要があります：

div#statSearchFields div { 
    vertical-align: middle; 
}

出典

2016-08-23 19:53:55 Vcasso

私は他のすべてのDIVを整列させたくありません - 他のDIVがどこにあるのかを正確に知りたいと思います。真ん中に移動したいのは、その検索画像を含むDIVだけです。 –

他の2つのdivは移動しません。上記のスニペットをあなたのフィドルに追加して試してみてください。 3つのdivをすべて中央に揃えると、最初の2つのdivは同じ高さになるため、同じままになります。したがって、3つのdivはすべて中央に配置する必要があります。 – Vcasso

.searchField {display: inline-block; vertical-align: bottom;}

は、フィールド容器の底にそれを合わせます。そして、あなたはあなたがdisplay: table;とdisplay: table-cell;を使用することができます...

fiddle update

出典

2016-08-23 19:54:10 Scott

私はそれを底に整列させたくありません。私はそれを真ん中（中央）に揃えたい。 –

フィディーであなたを見てください？ – Scott

をインライン垂直整列を削除...と、ボタン自体に整列させることができます。

Take a look here.

出典

2016-08-23 20:05:13

これらのスタイル属性を適用する要素は何ですか？ –

リンクを参照してください。必要なものはすべてそこにあります。 :) –

の下に使用し、期待される結果を達成するために

HTML：

<div class="test" style="display:inline-block; vertical-align:middle"><input alt="Search" type="image" src="/assets/magnifying-glass-0220f37269f90a370c3bb60229240f2ef2a4e15b335cd42e64563ba65e4f22e4.png" class="search_button"></div> 
</div>

CSS：

.test{ 
    position:absolute; 
    top:50%; 
}

https://jsfiddle.net/Nagasai_Aytha/hLn6fv49/4/

出典

2016-08-23 20:40:17

画像を垂直方向に中央に配置できません

答えて

関連する問題