在div中垂直和水平居中文本

时间:2016-10-20 14:10:53

标签: html css twitter-bootstrap twitter-bootstrap-3

我正在使用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/

编辑:向身体和页面添加高度%。

1 个答案:

答案 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>