ssk ssk - 6 months ago 21
CSS Question

Center and Vertically align input fields in bootstrap

I have a set of input fields:

<input type="image" src="images/text_to_speech.svg" alt="Speak This" width="48" height="48" id="say_button"></input>

<input type="text" value="" class="input-lg" id="say_utterance" placeholder="Enter text to speak..."></input>

<span id="say_remaining"></span>

It's not aligned vertically. How to fix this?

enter image description here


For the minimal code you provided, it's actually your image causing the issue. Add vertical-align:middle; to it and the rest will center out. Demo.