让div+css的div居中, 而里面的文字不居中的做法

2016-02-19 19:46 29 1 收藏

生活已是百般艰难,为何不努力一点。下面图老师就给大家分享让div+css的div居中, 而里面的文字不居中的做法,希望可以让热爱学习的朋友们体会到设计的小小的乐趣。

【 tulaoshi.com - Web开发 】

  让div+css的div居中, 而里面的文字不居中的做法:

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

!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
title
做一个测试
/title
style type="text/css" rel="stylesheet"
body{
margin:0px;
}
#countainer{
margin:auto;
width:600px;
height:100%;
background-color:#cccccc;
}
/style
/head
body
div id="countainer"
中国
/div
/body
/html

  事实上, 这里的最关键的一个点在: countainer类的属性里的: margin:auto; 这个值!

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

  刚才测试时, 发现里的!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"

  也是很重要的, 如果没有这句在IE浏览器里的显示还是居左的, 在火狐和谷歌浏览器时的显示是正确的, 加了这句后, 所有的浏览器时显示都是正的

来源:http://www.tulaoshi.com/n/20160219/1621751.html

延伸阅读
标签: Web开发
现在进行WEB重构的时候,一般我们做DIV 居中是这样: body{ margin:0px auto; text-align:center; } 但是在没申明下面这句解析方法的时候,页面就会出错.不能居中对齐! !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" 为此困扰了我几天.那么有的朋友就会说:你加上这句不就行了吗? 可...
标签: Web开发
在前面的文章中我简单总结了一个CSS在页面布局中实现div水平居中的方法,其实水平居中实现还是比较简单的,反而垂直居中有点麻烦,因为我们设计页面的时候往往水平宽度都是固定的。因此我们有必要总结一下在页面布局过程中实现垂直居中的方法。     在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置...
标签: Web开发
在Web标准中的页面布局是使用Div配合CSS来实现的。这其中最常用到的就是使整个页面水平居中的效果,这是在页面布局中基本,也是最应该首先掌握的知识。不过,还是经常会有人问到这个问题,在这里我简单总结一下使用Div和CSS实现页面水平居中的方法: 一、margin:auto 0 与 text-aligh:center     在现代浏览器(如Internet E...
标签: Web开发
CSS+DIV是网站标准(或称“WEB标准”)中常用的术语之一,通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别,因为XHTML网站设计标准中,不再使用表格定位技术,而是采用css+div的方式实现各种定位。应用应用DIV+CSS编码时很容易犯一些错误。本文列举了一些常见的错误: 1. 检查HTML元素是否有拼写错误、是否忘记结束标...
标签: Web开发
什么是CSS+DIV?  CSS+DIV是网站标准(或称“WEB标准”)中常用的术语之一,通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别,因为XHTML网站设计标准中,不再使用表格定位技术,而是采用css+div的方式实现各种定位。 CSS是英语Cascading Style Sheets(层叠样式表单)的缩写,它是一种用来表现 HTML 或 XML ...

经验教程

111

收藏

71
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部