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

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

<!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; 这个值!

刚才测试时, 发现里的<!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浏览器里的显示还是居左的, 在火狐和谷歌浏览器时的显示是正确的, 加了这句后, 所有的浏览器时显示都是正的

时间: 2024-08-03 23:12:43

让div+css的div居中而里面的文字不居中的做法的相关文章

Div+CSS实现div容器水平居中的方法小结

在Web标准中的页面布局是使用Div配合CSS来实现的.这其中最常用到的就是使整个页面水平居中的效果,这是在页面布局中基本,也是最应该首先掌握的知识.不过,还是经常会有人问到这个问题,在这里我简单总结一下使用Div和CSS实现页面水平居中的方法: 一.margin:auto 0 与 text-aligh:center 在现代浏览器(如Internet Explorer 7.Firefox.Opera等)现代浏览器实现水平居中的方法很简单,只要设定到左右两侧的空白为自动即可.意即: #wrap {

div+css让div内部元素如单选按钮均匀分布

 代码如下: <div style="width: 62%;margin: auto;"> <div style="float:left;width: 49%; text-align: center"> <input type="radio" checked="checked"/>男 </div> <div style="float:left;width: 49%

div css控制DIV水平垂直居中

 代码如下 复制代码 <!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> <style type="te

Div+CSS设计网站利于优化

网页制作Webjx文章简介:您所在的位置:首页 网页设计 HTML/CSS/DIV Div+CSS设计网站的优点 Div+CSS设计网站的优点 2008-03-18 作者: 来源:网络 [大 中 您所在的位置:首页 > 网页设计 > HTML/CSS/DIV > Div+CSS设计网站的优点 Div+CSS设计网站的优点 2008-03-18 作者: 来源:网络 [大 中 小] 评论:0 软件: 网页设计行业从业者越来越关注DIV+CSS的标准化设计,大到各大门户网站,小到不计其数的个人

DIV+CSS网站架构优点深入解析

&http://www.aliyun.com/zixun/aggregation/37954.html">nbsp;   DIV+CSS是网站标准(或称"WEB标准")中常用的术语之一,通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别,因为XHTML网站设计标准中,不再使用表格定位技术,而是采用DIV+CSS的方式实现各种定位. CSS是英语Cascading Style Sheets(层叠样式表单)的缩写,它是一种用来表现 HTML 或

典型的DIV+CSS三行二列居中高度自适应布局

css|自适应 如何使整个页面内容居中,如何使高度适应内容自动伸缩.这是学习CSS布局最常见的问题.下面就给出一个实际的例子,并详细解释.(本文的经验和是蓝色理想论坛xpoint.guoshuang共同讨论得出的.) 首先先按这里看实际运行效果,这个页面在mozilla.opera和IE浏览器中均可以实现居中和高度自适应.我们来分析代码: CSS: body{background:#999;text-align:center;color: #333;font-family:arial,verda

绝对居中的层div+css代码示例

绝对居中的层div+css代码示例 以下是代码:<html> <head> <title>Nice and Free CSS Template 11</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"><!--

css控制div不能居中的解决办法

  1.css控制div不能居中最容易犯的也最简单的就是没写DTD语句,不符合w3c规则,这个解决起来很容易,在页面的最上方加上: 就行了!其实还有很多css失效的问题也都是因为没有写dtd语句而引起的. 2.使用margin来让DIV居中 最简单的写法就是: .divtemp{ margin:0 auto; } 还可以这样: .divtemp{ margin-left:auto; margin-right:auto; } 这样就可以让DIV居中了! 用css控制div居中

CSS中div高度内容垂直方向居中方法总结

让div中的内容垂直居中,无非有以下几种方法,等我一一列举:  一.行高(line-height)法  如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可,比如:   代码如下 复制代码 p { height:30px; line-height:30px; width:100px; overflow:hidden; }   这段代码可以达到让文字在段落中垂直居中的效果.  二.内边距(padding)法  另一种方法和行高法很相似,它同样适合一行或几行文