第三章Div水平居中

2022-01-27 09:46:49

1.div居中

text-align:center可以让元素里面的文字内容居中，但并不能让div居中。要让div水平居中必须设置div宽度，外边距设置为margin:0 auto

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AlignCenter.aspx.cs" Inherits="布局.AlignCenter" %>

<!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" >

        body

        {

            text-align :center;

        }

        .poetry_box

        {

            background-color:#E8E8E8;

            width:250px;

            margin:0 auto;

        }

    </style>

</head>

<body>

    <form id="form1" runat="server">

    <div class ="poetry_box" >

        <h1 >春晓</h1>

        <address >唐代&middot;孟浩然</address>

        <p>春眠不觉晓，处处闻啼鸟。</p>

        <p>夜来风雨声，花落知多少。</p>

    </div>

    </form>

</body>

</html>

2.div居右

让div居右显示有两种方式：浮动和定位

浮动：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AlignCenter.aspx.cs" Inherits="布局.AlignCenter" %>

<!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" >

        .poetry_box

        {

            float:right;

            background-color:#E8E8E8;

            width:250px;

        }

    </style>

</head>

<body>

    <form id="form1" runat="server">

    <div class ="poetry_box" >

        <h1 >春晓</h1>

        <address >唐代&middot;孟浩然</address>

        <p>春眠不觉晓，处处闻啼鸟。</p>

        <p>夜来风雨声，花落知多少。</p>

    </div>

    </form>

</body>

</html>

定位：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AlignCenter.aspx.cs" Inherits="布局.AlignCenter" %>

<!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" >

        .poetry_box

        {

            position:absolute ;

            right:0;

            background-color:#E8E8E8;

            width:250px;

        }

    </style>

</head>

<body>

    <form id="form1" runat="server">

    <div class ="poetry_box" >

        <h1 >春晓</h1>

        <address >唐代&middot;孟浩然</address>

        <p>春眠不觉晓，处处闻啼鸟。</p>

        <p>夜来风雨声，花落知多少。</p>

    </div>

    </form>

</body>

</html>

码农公寓

相关文章