水平表格行内的Bootstrap 4垂直居中文本

马吕斯

在 Bootstrap 4 Horizo​​ntal 表单中,带有文本的 div 如何垂直居中?

这是取自https://getbootstrap.com/docs/4.3/components/forms/#horizo​​ntal-form的示例,但表单输入不是纯文本 div,例如“密码在此处”文本:

<form>
  <div class="form-group row">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10 align-middle">
      Password goes here
    </div>
  </div> 
</form>

我尝试了 align-middle、d-inline-block 类,但没有效果。

阿马雷什 SM

用于align-self-center垂直对齐

<form>
  <div class="form-group row">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10 align-self-center ">
     Password goes here
    </div>
  </div> 
</form>

参考:https : //getbootstrap.com/docs/4.3/utilities/flex/#align-self

演示:

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">


<form>
  <div class="form-group row">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10 align-self-center ">
     Password goes here
    </div>
  </div> 
</form>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

在div中将文本垂直和水平居中

Kivy TextInput水平和垂直对齐(居中文本)

在Bootstrap 4中创建水平表格

如何在Bootstrap 4的容器中垂直和水平居中放置文本?

Bootstrap 4表格响应式,水平和垂直滚动

圆内垂直和水平居中的文本

Bootstrap 4在div中垂直居中放置文本

在指定的框中使文本垂直居中,而不是水平居中

Bootstrap 4卡座,垂直居中

如何与'write-mode:sideways-lr'结合使用水平和垂直居中文本?

将QTextEdit的文本水平和垂直居中

垂直和水平居中地将文本居中

Android中TextView的水平和垂直居中文本

图像中文本的垂直和水平居中位置,而不考虑分辨率的比例

Bootstrap文本垂直居中对齐

无法在表格单元格中垂直居中文本

Bootstrap - 居中文本字段

如何在 Bootstrap 4 中向 HTML 项目添加响应式居中文本?

如何在我的 Bootstrap 4 列中垂直居中文本

Bootstrap v4:滑动完成时仅文本轮播仅居中文本(否则粘在顶部)

在 TextView 中水平居中文本不起作用

使用 Java 在窗口中水平居中文本

在两个行内块 div 中垂直居中文本

如何水平和垂直居中表格文本?

如何在正方形中垂直和水平居中文本

如何在 LaTex 表格环境中的表格单元格中垂直居中文本?

在 Bootstrap4 的導航欄中居中文本的問題

如何使用 Bootstrap 5 在列中垂直居中文本和图像?

如何在 CSS 网格项目中垂直和水平居中文本?