我正在使用bootstrap,我正在尝试制作一个100%高度和宽度的主机容器。
标题是该空间的30%,值为70%。该值的上限和下限各占20%,剩余60%的空间用于实际值。
HTML:
<div class="container-fluid parameterContainer">
<div class="row paramHead">
<span class="virtAlignFix"></span>
<div class="centerText">
SPO2 (%)
</div>
</div>
<div class="row paramValWrapper">
<div class="row paramLimit">
<span class="virtAlignFix"></span>
<div class="centerText">
200
</div>
</div>
<div class="row paramValue">
<span class="virtAlignFix"></span>
<div class="centerText">
80
</div>
</div>
<div class="row paramLimit">
<span class="virtAlignFix"></span>
<div class="centerText">
40
</div>
</div>
</div>
CSS:
html {
height: 100%;
width: 100%;
}
body {
height: 100%;
width: 100%;
}
.virtAlignFix {
line-height: 100%;
}
.parameterContainer {
height: 100%;
width: 100%;
}
.paramValWrapper {
height: 70%;
width: 100%;
}
.paramLimit {
height: 20%;
width: 100%;
text-align:center
}
.paramHead {
height: 30%;
width: 100%;
text-align:center
}
.paramValue {
height: 80%;
width: 100%;
text-align:center
}
.centerText {
vertical-align:middle;
display:inline-block;
}
我的尝试小提琴: http://jsfiddle.net/WCBjN/1173/
编辑:向身体和页面添加高度%。
答案 0 :(得分:5)
使文本中心是相当微不足道的,最简单的方法如下。您也可以查看jsFiddle:https://jsfiddle.net/jL9bs0j7/
.text-container {
height:200px;
width:400px;
border: 1px solid #000;
text-align: center;
}
.text-container span {
display: block;
position: relative;
top: 50%;
transform: translateY(-50%);
}
<div class="text-container">
<span>Hello World</span>
</div>