表格及其垂直居中

# 表格
# 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>
表格 及其垂直居中

猜你喜欢

表格及其垂直居中
