您的位置：首页 > Web前端 > CSS

CSS中水平居中的inline-height 和 vertical-align:middle;

2014-12-05 20:59 591 查看

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);

    }
    
}

显示效果如下：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航