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

查看：34
本文介绍了在 div 中垂直和水平居中文本的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用引导程序，我正在尝试制作一个 100% 高度和宽度的单元格.

标题是该空间的 30%，值是 70%.数值有上下限，各占20%，留出60%的空间给实际值.

HTML:

<div class="row paramHead"><span class="virtAlignFix"></span><div class="centerText">SPO2 (%)

<div class="row paramValWrapper"><div class="row paramLimit"><span class="virtAlignFix"></span><div class="centerText">200

<div class="row paramValue"><span class="virtAlignFix"></span><div class="centerText">80

<div class="row paramLimit"><span class="virtAlignFix"></span><div class="centerText">40

CSS:

html {高度:100%；宽度:100%；}身体 {高度:100%；宽度:100%；}.virtAlignFix {行高:100%；}.parameterContainer {高度:100%；宽度:100%；}.paramValWrapper {高度:70%；宽度:100%；}.paramLimit {高度:20%；宽度:100%；文本对齐:居中}.paramHead {高度:30%；宽度:100%；文本对齐:居中}.paramValue {高度:80%；宽度:100%；文本对齐:居中}.centerText {垂直对齐:中间；显示:内联块；}

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

为正文和页面添加了高度 %.

解决方案

使文本居中是相当简单的，最简单的方法如下.您也可以查看 jsFiddle:https://jsfiddle.net/jL9bs0j7/

.text-container {高度:200px；宽度:400px；边框:1px 实心 #000；文本对齐:居中；}.text-container span {显示:块；位置:相对；顶部:50%；变换:translateY(-50%);}

<span>Hello World</span>

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屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆