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. zabbix监控主机CPU使用率

    zaibix默认模板针对CPU只有监控负载(load)没有监控CPU使用率 选择配置-模板-Template OS Windows-监控项 创建监控项 创建监控图形 查看图像结果

  2. easyui Dialog 去边框

    使用Url页面显示 panel-body 的内容, 因页面高度大于iframe高度,右侧则会出现边框, 如果页面显示的内容高度真实大于iframe高度,那出现边框是很正常. 我的问题就是有内部页面 的 ...

  3. 如何打jar包 学习笔记

    jar包是由.class文件压缩而成.要查看jar包中的内容,使用压缩工具 解压缩即可.也可以做修改,并重新打成jar包.总结一下最近学到的一些打jar包的方法: 一.DOS下使用jar命令 打jar ...

  4. AutoFac Ioc依赖注入容器

    本文原著:牛毅  原文路径 http://niuyi.github.io/blog/2012/04/06/autofac-by-unit-test/ 理解IOC容器请看下图: 没有使用IOC容器的情况 ...

  5. Impala2.7.0-cdh5.x.x安装部署

    部署impala impala安装选择rpm包方式进行,这是本次部署唯一一个主要主件采用rpm方式进行安装部署,这里主要原因是cloudera没有提供现成的tar包文件,而源码编译过程会出现各种未知原 ...

  6. FFmpeg制作+x264+faac

    https://blog.csdn.net/leixiaohua1020/article/details/47071547  雷神的博客 https://www.jianshu.com/p/3f023 ...

  7. 2014年蓝桥杯省赛A组c++第2题(推公式)

    /* 标题:切面条 一根高筋拉面,中间切一刀,可以得到2根面条. 如果先对折1次,中间切一刀,可以得到3根面条. 如果连续对折2次,中间切一刀,可以得到5根面条. 那么,连续对折10次,中间切一刀,会 ...

  8. delphi 把数据库图片的存取

    procedure TForm1.Button1Click(Sender: TObject); // 插入图片过程 var Stream:TMemoryStream;begin try Stream ...

  9. Dom4j与sax 简单对比

    Dom4j与sax之间的对比 dom4j不适合大文件的解析,因为它是一下子将文件加载到内存中,所以有可能出现内存溢出,sax是基于事件来对xml进行解析的,所以他可以解析大文件的xml,也正是因为如此 ...

  10. 使用@import导入实现了ImportBeanDefinitionRegistrar接口的类，不能被注册为bean

    今天在调试公司spring项目的时候发现了这样一个问题,由于我们的项目使用的是springboot就以springboot为例,代码如下: @Import({DataSourceRegister.cl ...