Vertically align text within a form

Question

I have tried different solutions from previous answers and none have worked for me. I have this form and I can't align the bar vertically.

<form action="index?q=<?php echo $_POST['query']?>">
                    <div class="input-group mb-3" >
                        <input name="query" type="text" class="form-control" style="padding-bottom: 2.4em;">
                        <div class="input-group-append">
                            <button class="btn btn-outline-secondary" id="barra_navagacion_boton" type="submit"><i
                                    id="Boton_Buscar"><img src="./img/search.png"
                                        style="width:2em;max-width: 100%;"></i></button>
                        </div>
</form>

<input name="query" type="text" class="form-control" style="padding-bottom: 2.4em; vertical-align:middle;">

I have tried this line and removing the padding works, but not with both lines. What could I do? Thank you!

Answer 1

If you mean you would like to center the cursor vertically in the textbox. Then you need to make the padding even on the top and bottom.

  padding-top: 1.2em;
  padding-bottom: 1.2em;

Answer 2

<input name="query" type="text" class="form-control" style="height:50px">

Don't use padding. Define height.

Answer 3

In the heading you say text in the content you say bar? but for the bar: Do not complicate the code simply Rotate by 90deg.

<input name="query" type="text" class="form-control" style="padding-bottom: 2.4em; transform: rotate(90deg);">

For the text add sum css:

p {
  writing-mode: vertical-rl;
  text-orientation: upright;
}

If you meant to align the text in sear bar centre:

<form action="index?q=<?php echo $_POST['query']?>">
                    <div class="input-group mb-3" >
                        <input name="query" type="text" class="form-control" style="style="text-align: center;";">
                        <div class="input-group-append">
                            <button class="btn btn-outline-secondary" id="barra_navagacion_boton" type="submit"><i
                                    id="Boton_Buscar"><img src="./img/search.png"
                                        style="width:2em;max-width: 100%;"></i></button>
                        </div>
</form>

Answer 4

CSS "vertical-align"