zoukankan      html  css  js  c++  java
  • 第三章Div水平居中

    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>
    View Code

    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>
    View Code

    定位:

    <%@ 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>
    View Code
  • 相关阅读:
    hud 1397
    hdu 1211
    hdu 1124
    hdu 1104
    1788
    hdu 1796
    sdut 2169
    hdu 1019
    $http post 取不到数据
    sql
  • 原文地址:https://www.cnblogs.com/lidaying5/p/9995541.html
Copyright © 2011-2022 走看看