侧边栏壁纸
博主头像
落叶人生博主等级

走进秋风,寻找秋天的落叶

  • 累计撰写 130562 篇文章
  • 累计创建 28 个标签
  • 累计收到 9 条评论
标签搜索

目 录CONTENT

文章目录

css3 – 如何在引导中使用垂直对齐

2022-07-02 星期六 / 0 评论 / 0 点赞 / 119 阅读 / 1220 字

简单问题:如何使用引导程序在col中垂直对齐col?示例这里(我想垂直对齐child1a和child1b): http://bootply.com/73666 HTML <div cla

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

http://bootply.com/73666

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- *类的功能。

. ..

广告 广告

评论区