在div中垂直和水平居中文本 [英] Centering text vertically and horizontally in a div

问题描述

标题占这个空间的30％。

我使用bootstrap，并且试图制作一个100％高度和宽度的主容器。值为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％; 
宽度：100％; 
} 
 body {
 height：100％; 
宽度：100％; 
} 
 .virtAlignFix {
 line-height：100％; 
} 
 
 .parameterContainer {
 height：100％; 
宽度：100％; 
} 
 
 .paramValWrapper {
 height：70％; 
宽度：100％; 
} 
 
 .paramLimit {
 height：20％; 
宽度：100％; 
 text-align：center 
} 
 
 .paramHead {
 height：30％; 
宽度：100％; 
 text-align：center 
} 
 
 .paramValue {
 height：80％; 
宽度：100％; 
 text-align：center 
} 
 
 .centerText {
 vertical-align：middle; 
 display：inline-block; 
} 
  

我尝试的小提琴：
http://jsfiddle.net/WCBjN/1173/

编辑：添加高度％到正文和页面。

解决方案

<使用文本中心是相当平凡的，最简单的方法如下。您也可以查看jsFiddle： https://jsfiddle.net/jL9bs0j7/

.text-container {height：200px;宽度：400像素; border：1px solid＃000; text-align：center;}。text-container span {display：block;位置：相对;顶部：50％; transform：translateY（-50％）;}

< div class =text-container> < span> Hello World< / span>< / div>

I am using bootstrap and I am attempting to make a Cell that is 100% height and width of its host container.

The title is 30% of that space and the value is 70%. There are upper and lower limits of the value that take up 20% each leaving 60% of the space for the actual value.

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;  
}

Fiddle of my attempt: http://jsfiddle.net/WCBjN/1173/

EDIT: added height % to body and page.

解决方案

Making text central is fairly trivial, the easiest approach is as follows. You can check out the jsFiddle too: 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>

这篇关于在div中垂直和水平居中文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！