gpt4 book ai didi

html - 垂直对齐 :middle does not align content in the middle when used with bootstrap columns

转载 作者:行者123 更新时间:2023-11-28 15:21:16 28 4
gpt4 key购买 nike

我有三列,中间列有一个按钮,我想在中间垂直对齐。

<div class="row">
<div class="col-md-1">
<div class="mypanel">
</div>
</div>
<div class="col-md-1">
<div class="mypanel">
<div style="vertical-align:middle">
<button type="button">Click</button>
</div>
</div>
</div>
<div class="col-md-1">
<div class="mypanel">

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

风格

  .mypanel {
height: 200px;
border: 1px solid black;
}

但是 vertical-align:middlediv 的内容没有任何影响

DEMO

最佳答案

.mypanel {
height: 200px;
border: 1px solid black;
display:table;
}

.mypanel div{
display:table-cell;
vertical-align:middle
}

这将解决问题 https://jsfiddle.net/xyx3enz1/

关于html - 垂直对齐 :middle does not align content in the middle when used with bootstrap columns,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46080843/

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