垂直对齐表单中的文本

Question

我尝试了与之前答案不同的解决方案，none 对我有用。我有这个表格，我无法垂直对齐栏。

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

我试过这条线并删除了填充，但两条线都没有。我能做什么？谢谢！

Answer 1

CSS“垂直对齐”

Answer 2

如果您的意思是希望将光标在文本框中垂直居中。然后你需要使顶部和底部的填充均匀。

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

Answer 3

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

不要使用填充。定义高度。

Answer 4

在标题里你说文字在内容里你说吧？但对于酒吧：不要把代码复杂化简单的旋转90度。

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

对于文本加总和css:

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

如果您想要将文本对齐到灼热条中心：

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

垂直对齐表单中的文本

Vertically align text within a form

html

css

bootstrap-4

caret