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. TOP100summit2017:豆瓣耿新跃---站在公司整体目标下看技术管理

    壹佰案例:耿新跃老师您好,很荣幸又一次邀请到您担任壹佰案例大会的联席主席,在去年的壹佰案例大会上,您给我们带来很多非常经典的案例点评和提炼.您在去年壹佰案例峰会上最大的感触是什么呢? 耿新跃:我个人最 ...

  2. MySQL的JDBC驱动源码解析

    原文:   MySQL的JDBC驱动源码解析 大家都知道JDBC是Java访问数据库的一套规范,具体访问数据库的细节有各个数据库厂商自己实现 Java数据库连接(JDBC)由一组用 Java 编程语言 ...

  3. tensorflow的variable的eval()和read_eval()有什么不同

    eval()返回的数值标量 read_eval()返回的是这个变量的tensor,类型是read 直接上代码: def tensoflow_test(): t = tf.Variable(initia ...

  4. Django:模板template(二)

    将跨站请求伪造和验证码的东西记一下 CSRF Cross Site Request Forgery.跨站请求伪造 链接:GET请求:表单:POST请求 某些恶意的网站上,包含链接.表单.按钮.Java ...

  5. HTTP协议之Transfer-Encoding

    HTTP协议中的Transfer-Encoding 浏览器和服务器端支持持久连接 持久连接(Persist Connection) HTTP1.0默认不是持久连接的 HTTP1.1默认是持久连接的 在 ...

  6. wfp(Application的运用)

    1.Application中封装了wpf的一些常用的功能,如检查未经处理的异常,处理命令行参数等. 2.如何启动wpf程序: app.xaml可用于启动wpf的窗体.也可以不用这用方式.直接创建一个a ...

  7. Multiple SSH keys for different accounts on Github or Gitlab

    [inside this square brackets give a name to the followed acc.] name = github_username email = github ...

  8. Page10:Lyapunov稳定概念及判定定理[Linear System Theory]

    内容包含连续和离散系统的Lyapunov稳定概念及其各种判别定理

  9. [daily][centos][nginx] 在centos7使用nginx启用对文件目录的http访问

    1. 安装nginx yum install nginx 2. 修改配置 2.1 提供目录权限: 我需要访问的目录是 /home/data, 用户是data, 所以修改如下配置: [root@S205 ...

  10. 贪吃蛇java版

    主要的蛇的类 import java.awt.Color; import java.awt.Graphics; import java.awt.HeadlessException; import ja ...