![](/img/trans.png)
[英]How to vertically center a floating element of unknown height in Bootstrap?
[英]Center vertically when the height of element is unknown
當元素高度未知時,我想垂直居中文本?
HTML
<div class="table">
<div class="table-resp">
<div class="second-row">
<div class="col-md-5">
<div class="left-col-text">
Center vertically
</div>
</div>
<div class="col-md-7">
<div class="right-col-text">
<div class="example">Ex1</div>
<div class="example">Ex2</div>
<div class="example">Ex3</div>
</div>
</div>
</div>
</div>
</div>
CSS
/* CSS used here will be applied after bootstrap.css */
.table{
text-align: center;
padding-top: 70px;
padding-left: 0px;
padding-right: 35px;
}
.table-resp{
border: 1px solid green;
overflow-x: hidden;
}
.text1{
float: left;
display: inline-block;
}
.second-row{
line-height: 30px;
clear: left;
min-height: 30px;
overflow: auto;
}
.left-col-text{
height: 100%;
}
元素“Ex1,Ex2”計數是未知的,因此,如果有更多這些,顯然,表格行將變得更高。 我需要一些解決方案,這也會對此做出響應......
https://www.codeply.com/go/bp/4ZEUS7Q7lm
只需將row-ht-eq
類添加到row <div class="second-row">
CSS:
.row-ht-eq {
display: flex;
align-items: center;
}
position: absolute;
top: 50%;
transform: translateY(-50%);
你也可以玩:
display: table-cell;
vertical-align: middle;
注意:使用span
元素作為幫助。
HTML:
<div class="col-md-5">
<span class="helper"></span>
<div class="left-col-text">
Center vertically
</div>
</div>
CSS:
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
完整代碼:
.table{ text-align: center; padding-top: 70px; padding-left: 0px; padding-right: 35px; } .table-resp{ border: 1px solid green; overflow-x: hidden; } .text1{ float: left; display: inline-block; } .second-row{ line-height: 30px; clear: left; min-height: 30px; overflow: auto; } .left-col-text{ height: 100%; } .helper { display: inline-block; height: 100%; vertical-align: middle; }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <div class="table"> <div class="table-resp"> <div class="second-row"> <div class="col-md-5"> <span class="helper"></span> <div class="left-col-text"> Center vertically </div> </div> <div class="col-md-7"> <div class="right-col-text"> <div class="example">Ex1</div> <div class="example">Ex2</div> <div class="example">Ex3</div> </div> </div> </div> </div> </div>
將文本類更改為:
.left-col-text {
margin:0 auto;
}
這將自動決定從上到下的相等距離。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.