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

15 篇文章 0 订阅

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

    }
    
}

显示效果如下:


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值