ssk ssk - 3 months ago 7
CSS Question

Center and Vertically align input fields in bootstrap

I have a set of input fields:

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


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

enter image description here

Answer

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.

Comments