入力ボックスのセンタリングとアイコンボタン

入力ボックスとアイコンボタンの両方を垂直にセンタリングする必要があります。私はflexboxのjustify-contentとalign-contentを試しましたが、まだ動作していません。私はこれを行うことができるCSSの方法はありますか？ありがとうございました。入力ボックスのセンタリングとアイコンボタン

出典

2017-01-07 Lan Mai

あなたのHTMLは何ですか？ – bnahin

あなたのhtmlを共有します – kritikaTalwar

あなたはdisplay:flex;を持つことになり、コンテナのdivでそれらをラップする必要があります。あなたのケースでは、flex-directionプロパティを使用することは常に良いですrowでしょう。

次に、項目を垂直に整列するにはalign-item:center;を使用してください。そして、それらが水平に中心に置かれるようにしたい場合は、.containerのCSSにjustify-content:center;を以下の例で追加してください。

私は入力ボックスの横にある検索アイコンのためのフォントと素晴らしいアイコンを使用しました。使用している質問には言及していないので、入力ボックス、アイコンボタンの親要素に

.container{ 
 
    display:flex; 
 
    flex-direction:row; 
 
    align-items:center; 
 
} 
 
.container input{ 
 
    line-height:80px; 
 
    margin:0 5px; 
 
} 
 
.container img{ 
 
    height:50px; 
 
    margin:0 5px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <input type="text" placeholder="Search"/> 
 
    <i class="fa fa-search"></i> 
 
    <img src="http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg"> 
 
</div>

出典

2017-01-07 08:24:47 ab29007

@Lan Maiあなたの問題を解決したら、私の答えを受け入れてください。あなたは私の答えの左側にあるチェックボックスをクリックすることを知っています。ありがとうございました。 – ab29007

Jezz ...あなたの答えはとても良いです！そして私はボックスをチェックした:) 非常に非常に非常に@ kittyCatありがとう！ –

'Run code snipper'は素晴らしいです！ –

、プロパティ行の高さを追加して入力し、アイコンボタンの親の高さに等しく、その値を設定します。

例：両方がdivの内側にあり、そのdivの高さが40pxの場合は、そのdivにプロパティline-heightを追加し、40pxに設定します。

出典

2017-01-07 08:27:51

すてきなアプローチ！どうもありがとうございました：） –

入力ボックスのセンタリングとアイコンボタン

答えて

関連する問題