利⽤css样式实现表格中字体垂直居中的⽅法
利⽤css样式实现表格中字体垂直居中的⽅法，具体代码如下所⽰：
有⼀个⾃定义表格如下所⽰，当所返回数据改变时，⽂字都能⾃动居中
//html
//⽤两个div做容器
<el-col :span="3" class="col_row1">
<div class="grid-content1 ">
<div class="subject1">{{item.subject1}}</div>
</div>
</el-col>
//css
.grid-content1 {
// width: 3.125rem;
width: 100%;
height:3.75rem;
display: table;
}
.subject1 {
display: table-cell;
vertical-align: middle;
}
补充：下⾯接着看下css样式—字体垂直、⽔平居中
<div class="tt">啦啦啦</div>
.tt{
padding: 0px;
width:500px;
height:200px;
text-align:center;
background-color:#F69;
display: table-cell;
vertical-align:middle
}
为啥呢，这是。好吧。看样式中  display: table-cell  ，作为表格单元格显⽰，如此⼀来， vertical-align:middle  属性起作⽤了。去
掉display可就不⾏了哦！！
⼀：基本概念
  ⾸先，依旧是概念。介绍⼀下⾏内元素和块级元素，这个很重要，因为有的属性只能⽤于块元素，⽽有的正好相反，在⼀定的情况下，它们也可以相互转换，⽐如⽤display来进⾏设置。
1.⾏内元素(⼜叫内联元素inline element):
    (1) 不占据⼀整⾏，随内容⽽定，有以下特点：
    (2) 不可以设置宽⾼，也不可以设置⾏⾼，其宽度随着内容增加，⾼度随字体⼤⼩⽽改变。
  (3) 内联元素可以设置外边界，但是外边界不对上下起作⽤，只能对左右起作⽤。
  (4) 也可以设置内边界，但是内边界在ie6中不对上下起作⽤，只能对左右起作⽤。
  常⽤的内联元素有：a - 锚点，b - 粗体(不推荐)，br - 换⾏，em - 强调，font - 字体设定(不推荐)，i - 斜体，img - 图
⽚，input - 输⼊框，label - 表格标签，
select - 项⽬选择，small - ⼩字体⽂本，span - 常⽤内联容器，定义⽂本内区块，strike - 中划线，strong - 粗体强调
1.块级元素block element:
    (1) 总是在新⾏上开始，占据⼀整⾏;
    (2) ⾼度，⾏⾼以及外边距和内边距都可控制;
  (3) 宽度始终是与浏览器宽度⼀样，与内容⽆关;
  (4) 它可以容纳内联元素和其他块元素。
  常⽤的块级元素有：div -最常⽤的块级元素，dl - 和dt dd搭配使⽤的块级元素，form - 交互表单，h1 - ⼤标题，hr - ⽔平分隔线，ol - 排序表单，p - 段落，ul - ⾮排序
列表互相转换：使⽤display设置可以使得⾏内元素拥有块级元素的特性，反之也可以
⼆、现在开始说⼀下简单的⼏种基础的居中⽅式
1.块中⽂字⽔平居中：text-align ⽤于块级元素，作⽤在使⽤它的块元素中的⽂字或者图⽚上。使得它
们在⽔平⽅向上居中。
  这个属性只能作⽤于块元素(或者被CSS控制为块元素的内联元素，但是被控制为内联元素的块元素是不⾏的)。⼀句话来说，就是要拥有块元素的特点的那些元素。这个很好理解，居中，肯定是⾏居中，如果使⽤它的元素本⾝不拥有完整的在宽度上的独⽴空间，它当然没有能⼒让它内部的⽂字或者图⽚居中。css表格样式
  ⽗元素的这个属性对它下⾯的⼦元素也起作⽤，⽐如⼀个div设置了text-align居中，则它内部的⽂字可以居中，它的⼦div 内部的⽂字也可以居中。但是⼦元素中⽂字的居中，是在⼦div中居中，⽽不是对于⽗div居中。也就是，它⾥⾯所有的⽂字，都会相对于最靠近⾃⼰的⼀层div来实现居中。所以，这个属性不能⽤于div在⽗div中的整体居中。(不仅仅是div，所有的表现为块元素的元素)。
2 块元素⾃⾝⽔平居中(确定设置了宽度的块)：margin。这个肯定是接触CSS⼀开始就知道的了。
  ⼀般情况下，可以设置margin:0 auto；这会使这个块级元素在它的⽗级元素中居中，上下左右都会居中。
  如果只要⽔平居中的话，就设置margin-left:auto;margin-right:auto;
3 块元素⾃⾝⽔平居中(不确定宽度的块)：
  在其他的⼀些⽂章中，看到有不少⽅法来介绍不确定宽度的块的居中的。
  其实简单点说，不需要这么⿇烦。我们可以这样来理解，没有明确设定宽度的block，根据块级元素的性质，它默认是独占⼀⾏的，所以这个时候block本⾝就是浏览器窗⼝的宽度，就不必要来设置⽔平居中了。
　若是此时对块中的内容进⾏居中的话：
  如果块元素的⼦元素也为块元素，就对⼦元素使⽤margin auto⼀类的⽅式就好啦;
  如果块级元素的⼦元素为⾏内元素，就⽤我们⼀开始介绍的text-align也就可以解决;
  对于⼦元素为块元素的，也可以⽤display设置为inline然后再⽤text-align
4. vertical-align⽤于⾏内元素中的垂直居中
  vertical-align，这个可以⽤的很复杂。看了⼀些⽂章和例⼦，⾃⼰也有点⼩混乱，只说⼀下最简单的⽤法：
  这个属性⽤于
  1、内联元素(以及被转化为内联元素的块元素)
  2 、display设置为table-cell的元素，
  在 firefox 和 ie8 下，可以设置块级元素的 display 值为 table-cell，来激活 vertical-align 属性，显⽰效果和就和表格中的valign="center" ⼀样了。但 ie6,7 并不⽀持。
  3、<td><tr>这样的元素
    这样的写法：vertical-align:middle；就可以设置⽂字或者图⽚的垂直居中。只要具有⾏内元素的特性的元素使⽤这个属性，对它的⼦元素中的⽂字和图⽚也是起作⽤的。但是作⽤效果为使得⽂字或者图⽚相对于紧靠着它们的⽗元素来进⾏居中。这个和text-align上⾯说过的部分是类似的。
5 块级元素中的⽂字图⽚垂直居中(针对块的⾼度确定的，这个是从另⼀个博客上看到的，真的很实⽤哦，如果块内只有这些⽂字的话)
  ⽂字在层(块级元素)中垂直居中vertical-align 属性是做不到的.我们这⾥有个⽐较巧妙的⽅法就是：设置height的⾼度与line-height的⾼度相同!
<div ></div>
6 块级元素中的⽂字图⽚垂直居中(块的⾼度不确定的)
  在块的⾼度不确定的情况下，其实它的⾼度就是取决于⾥⾯内容的⾼度。如果内部只有⽂字或者图⽚的话，那就⾃然垂直居中了，其实就不必特意要设置。
  如果⾮要设置什么的话，⽐如希望块⼤⼀些，⽂字在块中垂直居中好看⼀点，可以设置内边距，如padding-top:20px;padding-bottom:20px;
  当然，如果上下内边距设置的不⼀样，就⾃然不居中了。
7 块级元素⾃⾝的垂直居中
  设置块级元素⾃⾝在⽗元素中的垂直居中，可以参照块级元素的⽔平居中的⽅法(上⾯说过)，设置外边距即可。如果不想设置⽔平居中，只要设置上下外边距为auto就好。
  也可以采⽤vertical-align:middle；的⽅式，但是前提是把display设置为table-cell。这样的话要注意浏览器兼容性问题。
总结
到此这篇关于利⽤css样式实现表格中字体垂直居中的⽅法的⽂章就介绍到这了，更多相关css表格字体垂直居中内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章，希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。