vertical-align:middle;适应于表格中,只能用于表格单元格中的对象竖直方向对齐的属性;inline-height 适应于文字内容只有一行的时候。
例如下列例子:
.aspx代码如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="表格.aspx.cs" Inherits="表格" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
table{ border:1px solid black; border-collapse:collapse;}
td{ border: 1px solid gray; width:40px;height:40px; text-align:center;<span style="color:#ff0000;"> vertical-align:middle;</span>}
td.black{ background-color:Black;}
#shiyan{<span style="color:#ff0000;"> height:40px;</span> border:1px solid black; <span style="background-color: rgb(255, 0, 0);"> line-height:40px;</span>}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:PlaceHolder ID="holder_table" runat="server"></asp:PlaceHolder>
</div>
<div class="test" id="shiyan" runat="server">
竖直居中显示
</div>
</form>
</body>
</html>
.aspx.cs代码如下:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class 表格 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Table _tbl = new Table();
TableRow _row;
TableCell _cell;
for (int r = 0; r < 8; r++)
{
_row = new TableRow();
for (int c = 0; c < 8; c++)
{
_cell = new TableCell();
_cell.Text = "a";
if ((r + c) % 2 == 1)
{
_cell.CssClass = "black";
}
_row.Cells.Add(_cell);
}
_tbl.Rows.Add(_row);
}
holder_table.Controls.Add(_tbl);
}
}
显示效果如下: