本文共 1795 字,大约阅读时间需要 5 分钟。
使用margin:0 auto
上下为0,左右自适应的css样式。要让div水平居中,那么除了设置css margin:0 auto外,还不能再设置float,不然将会导致div靠左(设置float:left)和div靠右(设置float:right)。
========
内容居中分为div内容水平居中与div内容垂直居中。
div内容居中,只需要设置一个内容居中css(text-align:center)、内容垂直居中(line-height)即可。
1、div内容水平居中
CSS: text-align:center无论是p还是div都可以对其设置此CSS实现对应对象内的内容水平居中。
2、div内容垂直居中
行高属性: line-height 要让div内只有一行的内容垂直居中,通常对div设置的height(高)与line-height(行高)相同,即可实现div内容垂直居中。========
让div在div中居中,需要居中的div设置margin:0 atuo即可(当然也不要设置float)。
========
默认情况下DIV是独占一排的,DIV不设置任何CSS样式,这个DIV盒子都会独占一行自动换行。
使用CSS让两个DIV并排显示,排成一排显示常见方法有两种:
1、使用display:inline 2、使用float一、使用display:inline
对div设置display:inline即可实现div不换行,而是并排显示,不会独占一排。
示范代码:
<style>
div{ display:inline} </style> ...... <body> <div>内容1;内容1;</div> <div>内容2;内容2;</div> </body> 使用display:inline,其实是去掉了div默认display:block(块 独占一行 对象换行)属性。 二、css 浮动 float让两个div并排显示float:left或float:right,靠左和靠右可以让DIV失去默认独占一行属性,所以使用float可以让div并排显示。
示例代码
<style>
div{ float:left} </style><body>
<div>内容1;内容1;</div> <div>内容2;内容2;</div> </body> 三、div并排总结 div并排很多时候用到,比如左右结构DIV布局,一般采用float设置靠左和靠右,如果多个DIV并排而不使用float,可以采用display:inline实现div不换行。========
在制作DIV+CSS页面时候,会遇到文字超出固定的高度,内容溢出。
设置类如:.STYLE1 { width:150px; height:80px;color: #000000; border:1px solid #FF0000;},文字不知道需要多少个文字才刚好不超过设置的红色边框,结果文字或图片大了就超过设置的BOX(CSS盒子)高和宽。
解决让文字不超出CSS盒子的固定高宽,只需要在此CSS类加入overflow:hidden;样式即可,加入后CSS类:.STYLE1 { width:150px; height:80px;color: #000000; border:1px solid #FF0000;overflow:hidden;}
这样文字就将不会溢出超出设置固定的高和宽区。
Overflow是检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
Overflow语法:
overflow : visible | auto | hidden | scrollOverflow参数:
visible : 不剪切内容也不添加滚动条。假如显式声明此默认值,对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效 auto : 此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条 hidden : 不显示超过对象尺寸的内容 scroll : 总是显示滚动条 ========
转载地址:http://xofy.baihongyu.com/