Text mit Bildern auf der linken und rechten Seite

Question

Ich versuche, eine kleine Navigation mit jquery und Bootstrap zu erstellen. Ich bin ein bisschen fest mit der Ausrichtung der Bilder

Ich habe 2 Pfeilbilder links und rechts mit dem Titel in der Mitte.

Unten ist mein Code

<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> 

ich einige Margen und Polsterungen gesetzt habe es geschafft, und bekommen es funktioniert, aber wenn der Titel länger wird die Layout bricht es tut auch Eigenschaft auf ansprechende Ansichten arbeiten.

Kann mir bitte jemand einen geeigneten Weg vorschlagen, dies zu tun?

Dank

Answer 1

Wenn Sie keine andere CSS haben, Dies ist nicht das, was Sie wollen, können Sie flex verwenden:

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

Und die float: left aus dem Bild entfernen.

Auch gibt es keine Notwendigkeit zu mehr.

Answer 2

Machen Sie den h2 einen Inline-Block, gelten vertical-align: middle; auf die Bilder und den Schwimmer aus dem ersten Bild entfernen:

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>