`
shirlly
  • 浏览: 1647845 次
  • 性别: Icon_minigender_2
  • 来自: 福州
社区版块
存档分类
最新评论

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

    博客分类:
  • CSS
阅读更多
让div+css的div居中, 而里面的文字不居中的做法:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml(标准化越来越近了)ns="http://www.w3.org/1999/xhtml">
<head>
<title>
做一个测试--WEB开发网
</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">
WEB开发网 测试页面
</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浏览器里的显示还是居左的, 在火狐和谷歌浏览器时的显示是正确的, 加了这句后, 所有的浏览器时显示都是正

转自:http://www.cncms.com.cn/css/14556.htm
分享到:
评论

相关推荐

    DIV+CSS水平垂直居中

    DIV+CSS 水平垂直居中网页学习 DIV+CSS 水平垂直居中是Web开发中一个常见的问题,如何将DIV元素水平垂直居中是一个非常重要的知识点。本文将详细介绍DIV+CSS水平垂直居中的方法和实现原理。 一、使用position:...

    DIV+CSS 图片垂直居中效果

    在网页设计中,"DIV+CSS 图片垂直居中效果"是一个常见的布局需求,它涉及到CSS的盒模型、定位和Flexbox或Grid等现代布局技术。以下是对这一主题的详细阐述: 1. **基础概念** - **DIV**:HTML中的`&lt;div&gt;`元素是一...

    DIV+CSS DIV居中布局

    本篇文章将深入探讨如何利用`DIV+CSS`实现`DIV`的居中布局。 首先,我们要理解`&lt;div&gt;`元素。`&lt;div&gt;`是“division”的缩写,代表一个区域或区块,在HTML中用于组合其他元素,是构建网页布局的基础。通过设置`&lt;div&gt;`...

    DIV+CSS简单登录界面模板

    在网页设计领域,`DIV+CSS`是一种广泛使用的布局技术,它通过定义不同的`Div`(Division,分块)元素并应用相应的`CSS`(Cascading Style Sheets,层叠样式表)样式来构建页面结构和外观。标题提到的“DIV+CSS简单...

    DIV+CSS上下左右绝对居中

    在网页设计中,"DIV+CSS上下左右绝对居中"是一个常见的布局需求,尤其是在构建响应式网站时。这个主题涉及到CSS(层叠样式表)的布局技巧,它可以帮助元素在不同屏幕尺寸下都能保持在容器的中心位置。下面将详细探讨...

    div+css垂直居中和水平居中

    在现代Web开发中,div元素作为布局容器广泛使用,而CSS则是样式控制的关键。我们将探讨不同情况下的居中策略,并结合给出的`juzhong.html`示例文件进行讲解。 1. **单行文本水平居中**: 使用`text-align: center;...

    DIV+CSS导航栏

    总的来说,`DIV+CSS`导航栏是网页设计中不可或缺的一部分,结合JavaScript可以实现更多交互效果。熟练掌握这些技能,将有助于提升网页的用户体验和设计质量。在实践中,不断尝试和优化,才能更好地适应不断变化的...

    DIV+CSS 图片居中效果 兼容 IE FF。。等浏览器

    DIV+CSS 图片居中效果 兼容 IE FF。。等浏览器

    Div+Css实例源代码

    而类名为"content"的div宽度设为80%,并居中显示。 三、CSS盒模型 理解CSS盒模型是掌握Div+CSS布局的关键。盒模型包括内容(content)、内边距(padding)、边框(border)和外边距(margin)。例如: ```css .box { ...

    使用div+css开发个人网站毕业设计.doc

    此外,文档还提到了div+css在不同浏览器间的兼容性问题,例如div的垂直居中、margin加倍、IE浏览器特有的显示问题等,并给出了相应的解决策略。这提醒开发者在设计时需考虑跨浏览器兼容性,确保网站在各种环境下都能...

    Div+CSS简单布局

    要让Div居中,有多种方法,包括使用`text-align`、`margin`、Flexbox或Grid。 1. **Text-align居中**:如果Div是内联元素,可以设置父元素的`text-align: center`使其居中。 2. **Margin居中**:对于块级元素,...

    css,div+css

    【CSS和Div+CSS布局详解】 CSS(Cascading Style Sheets)是一种用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档样式的样式表语言。在网页设计中,`div+css`布局是一种常见的网页布局方式,它将结构...

    div+css实现div的多层重叠,并且居中显示

    我们在制作网页时,有时需要多重div的重叠,每个div添加不同的内容,以实现特殊的层叠效果,这个如何实现,在网上没找到现成的详细的教程,但是可以用现有的...源代码+自己写的教程,希望对初学div+css的朋友有启发。

    Div+CSS 布局 实例 源码

    《Div+CSS布局实例源码》是一份专为学习和精通Div+CSS布局技术而设计的资源包。这个包包含了丰富的实例,旨在帮助初学者和有一定基础的学习者深入理解和掌握网页布局的核心技巧。Div+CSS是现代网页设计的基础,通过...

    Div+CSS 样式的使用演示

    Div(Division)是HTML中的一个块级元素,用于对网页内容进行区域划分,而CSS(Cascading Style Sheets)则是用来控制这些区域样式和布局的重要工具。本教程通过实例详细讲解Div+CSS的使用方法。 首先,Div标签在...

    Div+CSS布局入门教程(一二三四)

    继续学习Div+CSS布局,你将能够创建复杂而美观的网页布局,实现灵活的设计效果。在实践中不断尝试和优化,你将逐渐熟练掌握这项技术,为网页设计带来更多的可能性。记得巩固HTML基础知识,熟悉CSS选择器、盒模型、...

    div+css图片垂直居中

    "div+css图片垂直居中"是这个话题的核心,它涉及到CSS布局和浏览器兼容性问题,特别是对于Internet Explorer(IE)和其他现代浏览器的处理差异。下面将详细阐述如何实现这一目标。 1. **基本原理**: CSS中的定位...

    div+css常见兼容性问题

    在网页设计中,`div+css`是一种常见的布局方式,但它也伴随着一系列的浏览器兼容性问题。这些问题主要出现在不同浏览器对CSS规范的解读和实现上存在差异,尤其是老版本的Internet Explorer(如IE6和IE7)与其他...

    适合初学者的39个div+css网页布局例子

    本资源“适合初学者的39个div+css网页布局例子”是为那些刚开始接触网页布局的朋友们精心准备的,旨在帮助他们快速掌握Div+CSS的基础知识和实践技巧。 首先,我们要理解Div(Division,分隔)元素在HTML中的作用。...

Global site tag (gtag.js) - Google Analytics