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

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

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

【 tulaoshi.com - Web开发 】

  让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

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

  事实上, 这里的最关键的一个点在: 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"

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

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

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

延伸阅读
标签: Web开发
什么是CSS+DIV?  CSS+DIV是网站标准(或称“WEB标准”)中常用的术语之一,通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别,因为XHTML网站设计标准中,不再使用表格定位技术,而是采用css+div的方式实现各种定位。 CSS是英语Cascading Style Sheets(层叠样式表单)的缩写,它是一种用来表现 HTML 或 XML ...
标签: Web开发
在网页制作中,有许多的术语,例如:CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。 所有的设计第一步就是构思,构思好了,一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW...
标签: Web开发
CSS是Cascading Style Sheets(层叠样式表单)的简称。更多的人把它称作样式表。顾名思义,它是一种设计网页样式的工具。借助CSS的强大功能,网页将在您丰富的想象力下千变万化,越来越多的人在学习而很多初学者没有一个头绪,整理了一些学习的方法给大家。 一. CSS学习重在方法! 学习任何东西都是一样,从小学、中学、大学,除了学...
标签: Web开发
在前面的文章中我简单总结了一个CSS在页面布局中实现div水平居中的方法,其实水平居中实现还是比较简单的,反而垂直居中有点麻烦,因为我们设计页面的时候往往水平宽度都是固定的。因此我们有必要总结一下在页面布局过程中实现垂直居中的方法。     在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置...
标签: Web开发
在Web标准中的页面布局是使用Div配合CSS来实现的。这其中最常用到的就是使整个页面水平居中的效果,这是在页面布局中基本,也是最应该首先掌握的知识。不过,还是经常会有人问到这个问题,在这里我简单总结一下使用Div和CSS实现页面水平居中的方法: 一、margin:auto 0 与 text-aligh:center     在现代浏览器(如Internet E...

经验教程

174

收藏

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