垂直对齐表单中的文本

问题描述

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

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

我已经尝试过这条线并删除了填充工作，但不是两条线。我能做什么？谢谢！

解决方法

如果您想在文本框中垂直居中光标。然后，您需要使顶部和底部的填充均匀。

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

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

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

在标题中你说的内容你说的是栏吗？但对于酒吧：不要简单地将代码复杂化，只需旋转 90 度即可。

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

为文本添加 sum 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>

CSS“垂直对齐”

bootstrap-4 caret html