gpt4 book ai didi

html - 推特 Bootstrap : vertically align child div with height

转载 作者:行者123 更新时间:2023-11-28 17:40:45 25 4
gpt4 key购买 nike

我正在使用 Bootstrap v3.1.1 来设计网络应用程序。我在中间的 div 中有三个 div 我有一个小的 div,我需要将它垂直对齐。

这是我到目前为止得到的结果。

    <body>
<div class="row fill">
<div class="col-md-4 col-sm-3 col-xs-1 fill" style="background-color:red;">

</div>
<div class="col-md-4 col-sm-6 col-xs-10 parent" style="background-color:blue;">
<div class="child"></div>
</div>
<div class="col-md-4 col-sm-3 col-xs-1 fill" style="background-color:green;">

</div>
</div>
</body>

我无法将子 div 垂直对齐。我尝试遵循 css。

    .parent {
display:table;
height:100%;
display:table;table-layout:fixed;
}


.child {
vertical-align:middle;
text-align:center;
border:2px solid gray;
height:40%;
}

有人请帮忙,谢谢。

最佳答案

所以你的问题是你想垂直居中对齐 height 的子 div是40%但既然你把它给了 display:table-cell , 它的行为类似于 <td>元素并忽略高度。

解决方案是将该子 div 放在另一个容器中并应用 display:table-cellvertical-align:middle到那个容器:

    <div class="row fill">
<div class="col-md-4 col-sm-3 col-xs-1 fill" style="background-color:red;">

</div>
<div class="col-md-4 col-sm-6 col-xs-10 parent" style="background-color:blue;">
<!-- another container to vertical align the child div -->
<div class="center-child">
<div class="child">test</div>
</div>
</div>
<div class="col-md-4 col-sm-3 col-xs-1 fill" style="background-color:green;">

</div>
</div>

DEMO

关于html - 推特 Bootstrap : vertically align child div with height,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24177887/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com