1.div居中

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

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AlignCenter.aspx.cs" Inherits="布局.AlignCenter" %>
  2.  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4.  
  5. <html xmlns="http://www.w3.org/1999/xhtml">
  6. <head runat="server">
  7.     <title>最简单的页面</title>
  8.     <style type ="text/css" >
  9.         body
  10.         {
  11.             text-align :center;
  12.         }
  13.  
  14.         .poetry_box
  15.         {
  16.             background-color:#E8E8E8;
  17.             width:250px;
  18.             margin:0 auto;
  19.         }
  20.     </style>
  21. </head>
  22. <body>
  23.     <form id="form1" runat="server">
  24.     <div class ="poetry_box" >
  25.         <h1 >春晓</h1>
  26.         <address >唐代&middot;孟浩然</address>
  27.         <p>春眠不觉晓，处处闻啼鸟。</p>
  28.         <p>夜来风雨声，花落知多少。</p>
  29.     </div>
  30.     </form>
  31. </body>
  32. </html>

2.div居右

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

浮动：

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AlignCenter.aspx.cs" Inherits="布局.AlignCenter" %>
  2.  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4.  
  5. <html xmlns="http://www.w3.org/1999/xhtml">
  6. <head runat="server">
  7.     <title>最简单的页面</title>
  8.     <style type ="text/css" >
  9.  
  10.         .poetry_box
  11.         {
  12.             float:right;
  13.             background-color:#E8E8E8;
  14.             width:250px;
  15.         }
  16.     </style>
  17. </head>
  18. <body>
  19.     <form id="form1" runat="server">
  20.     <div class ="poetry_box" >
  21.         <h1 >春晓</h1>
  22.         <address >唐代&middot;孟浩然</address>
  23.         <p>春眠不觉晓，处处闻啼鸟。</p>
  24.         <p>夜来风雨声，花落知多少。</p>
  25.     </div>
  26.     </form>
  27. </body>
  28. </html>

定位：

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AlignCenter.aspx.cs" Inherits="布局.AlignCenter" %>
  2.  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4.  
  5. <html xmlns="http://www.w3.org/1999/xhtml">
  6. <head runat="server">
  7.     <title>最简单的页面</title>
  8.     <style type ="text/css" >
  9.  
  10.         .poetry_box
  11.         {
  12.             position:absolute ;
  13.             right:0;
  14.             background-color:#E8E8E8;
  15.             width:250px;
  16.         }
  17.     </style>
  18. </head>
  19. <body>
  20.     <form id="form1" runat="server">
  21.     <div class ="poetry_box" >
  22.         <h1 >春晓</h1>
  23.         <address >唐代&middot;孟浩然</address>
  24.         <p>春眠不觉晓，处处闻啼鸟。</p>
  25.         <p>夜来风雨声，花落知多少。</p>
  26.     </div>
  27.     </form>
  28. </body>
  29. </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. DB2 Version 10.5 补丁下载

    DB2 Version 10.5 for Linux, UNIX, and Windows fix pack summary https://www.ibm.com/support/knowledge ...

  2. org.hibernate.HibernateException: connnection proxy not usable after transaction completion

    今天yuan男神的程序报了这个错, getHibernateTemplate().saveOrUpdate(obj); getHibernateTemplate().flush(); getHiber ...

  3. 9月16日，base 福州，2018MAD技术论坛邀您一起探讨最前沿AR技术！

    “ 人工智能新一波浪潮带动了语音.AR等技术的快速发展,随着智能手机和智能设备的普及,人机交互的方式也变得越来越自然. 9月16日,由网龙网络公司.msup联合主办的MAD技术论坛将在福州举行.本次论 ...

  4. EF将IEnumerable<T>类型转换为Dictionary<T,T>类型

    x 无标题 #region 博客Code {DBEntities}生成EFModel的时候自己命名的 using ({DBEntities} db = new { DBEntities }()) { ...

  5. [No0000C4]TortoiseSVN配置外部对比工具

    TortoiseSVN -> Settings Diff Viewer : 选中External->找到外部工具:如BCompare.路径如果有空格的最好用"双引号"括 ...

  6. 基于cdh5.10.x hadoop版本的apache源码编译安装spark

    参考文档:http://spark.apache.org/docs/1.6.0/building-spark.html spark安装需要选择源码编译方式进行安装部署,cdh5.10.0提供默认的二进 ...

  7. MySQL异步复制-加强版

    准备:主备库版本一致,主从库正常安装软件. 1.主库上设置一个复制使用的账户: mysql> grant replication slave,replicate client on *.* to ...

  8. flex-shrink (适用于弹性盒模型容器子元素)

    设置或检索弹性盒的收缩比率(根据弹性盒子元素所设置的收缩因子作为比率来收缩空间.) 语法 flex-shrink: <number> (default 1) flex-shrink的默认值 ...

  9. js：return [ expression ]，return false，return true，return的区别

    1.return [ expression ] return返回值实际上是对window.event.returnvalue进行设置. 2.return false,阻止默认的行为, ① 当给a标签绑 ...

  10. echart 设计宽度为百分比时，div撑不开

    解决思路:将百分比换算成px 一句话搞定 ("#chart").css( 'width', $("#chart").width() );$("#cha ...