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>

第三章Div水平居中的更多相关文章

  1. 大div中，三个小div水平居中

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 《Django By Example》第三章 中文 翻译 （个人学习，渣翻）

    书籍出处:https://www.packtpub.com/web-development/django-example 原作者:Antonio Melé (译者注:第三章滚烫出炉,大家请不要吐槽文中 ...

  3. 《CSS3实战》读书笔记 第三章：选择器：样式实现的标记

    第三章:选择器:样式实现的标记 选择器的魔力在于,让你完全实现对网页样式的掌控.不同的选择器可以用在不同的情况下使用.总之把握的原则是:规范的编码,根据合理地使用选择器,比去背选择器的定义有价值的多. ...

  4. 《深入理解bootstrap》读书笔记：第三章 CSS布局

    一. 概述一下理念 bootstrap基于H5开发.提倡移动先行(媒询声明是必须的),对浏览器支持面不是很广. 响应式图片:max-width:100% height:auto; 可以加上:.img- ...

  5. 第三章SignalR在线聊天例子

    第三章SignalR在线聊天例子 本教程展示了如何使用SignalR2.0构建一个基于浏览器的聊天室程序.你将把SignalR库添加到一个空的Asp.Net Web应用程序中,创建用于发送消息到客户端 ...

  6. Knockout应用开发指南 第三章：绑定语法（3）

    原文:Knockout应用开发指南 第三章:绑定语法(3) 12   value 绑定 目的 value绑定是关联DOM元素的值到view model的属性上.主要是用在表单控件<input&g ...

  7. Knockout应用开发指南 第三章：绑定语法（2）

    原文:Knockout应用开发指南 第三章:绑定语法(2) 7   click 绑定 目的 click绑定在DOM元素上添加事件句柄以便元素被点击的时候执行定义的JavaScript 函数.大部分是用 ...

  8. Knockout应用开发指南 第三章：绑定语法（1）

    原文:Knockout应用开发指南 第三章:绑定语法(1) 第三章所有代码都需要启用KO的ko.applyBindings(viewModel);功能,才能使代码生效,为了节约篇幅,所有例子均省略了此 ...

  9. 第三章 jQuery中的事件与动画

    第三章jQuery中的事件与动画 一. jQuery中的事件 jQuery事件是对javaScript事件的封装. 1.基础事件 在javaScript中,常用的基础事件有鼠标事件.键盘事件.wind ...

随机推荐

  1. NFS文件服务器搭建

    NFS(Network File System)即网络文件系统,是FreeBSD支持的文件系统中的一种,它允许网络中的计算机之间通过TCP/IP网络共享资源.在NFS的应用中,本地NFS的客户端应用可 ...

  2. 主席树||可持久化线段树||BZOJ 3524: [Poi2014]Couriers||BZOJ 2223: [Coci 2009]PATULJCI||Luogu P3567 [POI2014]KUR-Couriers

    题目:[POI2014]KUR-Couriers 题解: 要求出现次数大于(R-L+1)/2的数,这样的数最多只有一个.我们对序列做主席树,每个节点记录出现的次数和(sum).(这里忽略版本差值问题) ...

  3. 7.26-STOIRegularMatch-08-#14

    A-3 SRM 08 描述 给一个 01 串设为其 S,询问是否存在只出现两次的 01 串 T. 这里的出现定义为存在一串下标 ,满足  且 . 输入格式 一行,一个 01 串 输出格式 一行,字母 ...

  4. 一劳永逸：域名支持通配符，ASP.NET Core中配置CORS

    ASP.NET Core 内置了对 CORS 的支持,使用很简单,只需先在 Startup 的 ConfigureServices() 中添加 CORS 策略: public void Configu ...

  5. 单目三维稠密重建方案：Quadtree-accelerated Real-time Monocular Dense Mapping

    论文:This is a monocular dense mapping system following the IEEE Robotics and Automation Letters (RA-L ...

  6. [No0000192]Vim打开和保存文件-Vim使用技巧(7)

    使用Vim打开和保存文件是最常用的操作,介绍使用edit命令通过文件路径来打开文件,使用write命令保存文件,当文件路径不存在或用户权限不匹配时,使用write命令调用外部shell程序完成操作. ...

  7. Arcengine 在SDE创建数据集提示应用程序未获得创建或修改此类型数据的方案的许可

    解决方案:将license Control的属性修改一下,ArcGIS Engine的√去掉,把第二个打√就可以了: 参考资料:http://www.docin.com/p-925448534.htm ...

  8. 【基本功】Java动态追踪技术探究 不重启JVM，替换掉已经加载的类？不重启JVM，获知运行时对象的属性

    https://mp.weixin.qq.com/s/_hSaI5yMvPTWxvFgl-UItA 小结: 1.根据Java的类加载机制,在同一个ClassLoader中,类是不允许重复的: 2.单例 ...

  9. int 存储大小 数组元素个数

    为了得到某个类型或某个变量在特定平台上的准确大小,您可以使用 sizeof 运算符.表达式 sizeof(type) 得到对象或类型的存储字节大小.下面的实例演示了获取 int 类型的大小: 实例 # ...

  10. python知识点杂记2

    1. 如果已经有一个list或者tuple,要调用一个可变参数怎么办?2. >>> nums = [1, 2, 3]3. >>> calc(*nums)4. 14* ...