表格 及其垂直居中
Posted yanhui1995
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了表格 及其垂直居中相关的知识，希望对你有一定的参考价值。
# 表格
# table的display: table
# table显示规则注意点:当设置的盒子高度大于显示内容需求高度,采用设置高度;反之则由显示内容撑开
# border:设置边框宽度
# cellspacing: 单元格间的间距
# cellpadding: 单元格的内边距==>th，td设置padding
#
# 举例:
# <!DOCTYPE html>
# <html>
# <head>
# <meta charset="UTF-8">
# <title>表格</title>
# <style type="text/css">
# .table1{
# width: 50px;
# height: 50px;
# }
# th，td{
# padding: 20px;
# }
# .table2 td {
# border: 10px solid black;
# }
# </style>
# </head>
# <body>
# < table
#
#
# class ="table1" border="1" cellpandding="10px" cellspacing="0" >
#
# < tr >
# < th > 标题 < / th >
# < th > 标题 < / th >
# < th > 标题 < / th >
# < / tr >
# < tr >
# < td > 单元格 < / td >
# < td > 单元格 < / td >
# < td > 单元格 < / td >
# < / tr >
# < tr >
# < td > 单元格 < / td >
# < td > 单元格 < / td >
# < td > 单元格 < / td >
# < / tr >
#
# < / table >
#
# < !-- 边框的保留格式rules：rows | coll | groups | all -->
# < table
#
#
# class ="table2" border="10" rules="all" >
#
# < thead >
# < th > 标题 < / th >
# < th > 标题 < / th >
# < th > 标题 < / th >
# < / thead >
# < tbody >
# < tfoot >
# < tr >
# < !-- rowspan合并列 -->
# < td
# rowspan = "2"
# colspan = "2" > 单元格 < / td >
# < !-- < td > 单元格 < / td > -->
# < td > 单元格 < / td >
# < / tr >
# < tr >
# < !-- < td > 单元格 < / td > -->
# < !-- < td > 单元格 < / td > -->
# < td > 单元格 < / td >
# < / tr >
# < tr >
# < !-- colspan合并行 -->
# < td
# colspan = "2" > 单元格 < / td >
# < !-- < td > 单元格 < / td > -->
# < td > 单元格 < / td >
# < / tr >
# < / tfoot >
#
# < / tbody >
#
# < / table >
# 实现多行文本垂直居中:
# 举例:
# <style type="text/css">
# .box,.b1 {
# width: 150px;
# height: 150px;
# margin: 10px auto;
#
# text-align: center;
# }
# .b2,.b3 {
# line-height: 150px;
# /*不起作用*/
# /*vertical-align: middle;*/
# }
# .b1 {
# /*float: left;*/
# /*实现多行文本垂直居中*/
# /*针对父级设置，父级中的多个块级文本类子级标签垂直居中*/
# display: table-cell;
# vertical-align: middle;
# }
# </style>
# </head>
# <body>
# <!-- 注： 如果想要调整box位置 可以给box嵌套一个子级b1来进行分标签控制 -->
# <div class="box">
# <div class="b1">
# <p>真的</p>
# <p>好的</p>
# </div>
# </div>
# <div class="box b2">
# <p>真的2</p>
# <p>哈哈哈哈</p>
# </div>
# <div class="box b3">
# <p>你的大锅饭</p>
# <p>吃穷</p>
# </div>
以上是关于表格 及其垂直居中的主要内容，如果未能解决你的问题，请参考以下文章