左と右に画像がある中央のテキスト

Question

jqueryとブートストラップを使用して小さなナビゲーションを作成しようとしています。私はちょうど画像を整列させるのにちょっと固まった。

私は2つの矢印画像を左右にタイトルを中心に置いている。以下は

私はいくつかのマージンやパディングを設定し、それが働いて得るために管理しなかったが、タイトルも長いレイアウト区切りを取得するとき、それは応答ビューのプロパティを仕事does notの私のコード

<div class="row" style="text-align:center"> 
    <img src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_left_48px-128.png" style="float:left"> 
    <h2>Heading name or title</h2> 
    <img src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_right_48px-128.png"> 
</div> 

です。

誰かが私にこれを行う適切な方法を提案できますか？

.row { 
    display: flex; 
    justify-content: center; 
} 

をし、画像からfloat: leftを削除：あなたが他のCSSを持っていない場合は

おかげ

Answer 1

は、これは、Flexを使用することができ、あなたが望むものではありません。

また、text-align:centerは不要です。

Answer 2

、h2インラインブロックを作成画像にvertical-align: middle;を適用し、第一の画像からフロートを削除：

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

<div class="row" style="text-align:center;"> 
 
    <img src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_left_48px-128.png"> 
 
    <h2>Heading name or title</h2> 
 
    <img src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_right_48px-128.png"> 
 
</div>