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. 我心目中的Dream-购物车

    功能要求: 1.要求用户输入自己拥有的总资产,例如:30000 2.显示商品列表的序号,商品名称,商品价格,让用户根据序号选择商品,然后加入购物车 例如: 1 Macbook 12000 2 Logi ...

  2. tomcat启动项目报错：The specified JRE installation does not exist

    在Build Path里设置好jre和各Library的顺序,代码无报错,启动时弹框,里面的信息是:The specified JRE installation does not exist. 后来想 ...

  3. python web篇 Django centos 命令版

    新建立一个虚拟环境,与其他python 包隔开互不影响 首先新建立一个目录,命名为xx, python3 下操作 $:python -m venv ll_env 注意在有多个Python环境下,使用 ...

  4. Linux之sed、awk

    Linux 之AWK 命令 简介 awk是一个强大的文本分析工具,相对于grep的查找,sed的编辑,awk在对数据分析并生成报告时,显得尤为强大. 简单来说awk就是把文件逐行的读入,以空格默认分隔 ...

  5. kubenets installation--ranchor-mesos

    [kube-proxy]http://www.cnblogs.com/xuxinkun/p/5799986.html [flannel] 安装Flannel [root@master ~]# cd ~ ...

  6. Usage of git

    目录 Git 配置 查看配置信息 基本概念 Git 创建仓库 git init git clone 撤销操作 从暂存区恢复文件 从仓库恢复某个文件 版本退回 版本前进 分支操作 删除未跟踪的文件 连 ...

  7. 模拟器运行报错：ld: symbol(s) not found for architecture x86_64

    模拟器运行报错: 报错信息如下: Undefined symbols for architecture x86_64: "_x264_encoder_open_142", refe ...

  8. NumPy 广播机制（Broadcasting）

    一.何为广播机制 a.广播机制是Numpy(开源数值计算工具,用于处理大型矩阵)里一种向量化数组操作方法. b.Numpy的通用函数(Universal functions) 中要求输入的两个数组sh ...

  9. bzoj 2563 [2012国家集训队Round 1 day2] 阿狸和桃子的游戏 贪心

    正解:贪心 解题报告: 链接在这儿! 知道解法之后会jio的好像很简单的样子……其实挺难想到的QAQ 不过大佬讲了方法之后还是懂了 有一个很神仙的想法就是,你可以理解为每个点周围的边都有半个是自己的, ...

  10. c# string 扩展方法

    场景:只显示一字符串的前50个字符,多余的用“...”省略号替代 如果不用扩展方法当然也可以实现,写一个静态方法,如下: public class StringUtil { /// <summa ...