当前位置: 首页 > 面试题库 >

如何在引导程序中使用垂直对齐

孟德曜
2023-03-14
问题内容

一个简单的问题:如何使用引导程序在一个col中垂直对齐一个col?这里的例子(我想垂直对齐child1a和child1b):

HTML

<div class="col-lg-12">

  <div class="col-lg-6 col-md-6 col-12 child1">
    <div class="col-12 child1a">Child content 1a</div>
    <div class="col-12 child1b">Child content 1b</div>

  </div>


  <div class="col-lg-6 col-md-6 col-12 child2">
  Child content 2<br>
  Child content 2<br>
  Child content 2<br>
  Child content 2<br>
  Child content 2<br>

  </div>

</div>

更新

一些CSS:

.col-lg-12{
top:40px;
bottom:0px;
border:4px solid green;


}

  .child1a, .child1b{
  border:4px solid black;
  display:inline-block !important;
}

.child1{
  border:4px solid blue;
  height:300px;
  display:table-cell !important;
  vertical-align:middle;
}

.child2{
  border:4px solid red;
}

问题答案:

.parent {
display: table;
table-layout: fixed;
}


.child {
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}

table-layout: fixed 防止破坏col- *类的功能。



 类似资料:
  • 我试图创建一个网页的主横幅旁边的图像标题。我尝试做的一个示例可以在下面找到:https://optimaninja.com/ 我正在使用bootstrap,下面是一些我必须开始的简单初学者代码: 引导代码: 谢谢你的帮助。

  • 我使用的是Bootstrap v3.2.0,我的html结构如下: 我试图使标题-卖家-配置文件类内的内容对齐到底部,但它根本不起作用,它一直坚持到顶部。

  • 我需要中心(水平和垂直)我的输入页面的内容。我正在使用Bootstrap 4 beta版,我在BS页面上按指南操作,但它不起作用-https://getbootstrap.com/docs/4.0/layout/grid/ 你能帮我修一下吗?谢谢

  • 我正在自动化混合应用程序。我想点击在页面上看不到的注销,因此我需要向下滚动来点击它。我正在尝试下面的代码,但它不起作用,我正在使用Java client 5.0.4 Appium server 1.7.2和selenium 3.9.1以及Java jdk版本1.8.0_161。谁能帮忙吗

  • 我试图使用bootstrap 4集中一个面板,我使用了Align-Items-Centre,但我没有成功。我已经添加了h-100,仍然继续在页面顶部的标题。有人知道会出什么问题吗?我在用angular 4和bootstrap `