IE7,div中的文本内容在Firefox浏览器中是如何垂直居中的,
你好!很高兴回答你的问题!
将行高和div高度设置为相同。也就是说,假设您想要在中显示竖排文本,那么代码是。a {身高:100px行高:100px}
您可以在Firefox社区中了解更多信息。希望我的回答对你有帮助。如有疑问,欢迎继续在本平台咨询。
text-align含义以及里面包含的属性?
一.text-align属性
1.text-align用来设置元素中的的文本对齐方式,例如:如果需要设置图片的对齐方式,需要设置图片的父元素的text-align属性;
2.text-align只对文本有效,对元素无效,不能设置元素的对齐方式;
3.表格元素td是属于inline-block,可以使用text-align设置td中的文本对齐方式;
二.水平居中和垂直居中
1.水平居中
(1) 文本、图片等行内元素的水平居中
给父元素设置text-align:center可以实现文本、图片等行内元素的水平居中。
(2) 确定宽度的块级元素的水平居中通过设置margin-left:auto;和margin-right:auto;来实现的。
(3) 不确定宽度的块级元素的水平居中
方法一:
使用table标签,table本身并不是块级元素,如果不给它设定宽度的话,它的宽度由内部元素的宽度“撑起”,但即使不设定它的宽度,仅设置margin-left:auto;和margin-right:auto;就可以实现水平居中!
将需要居中的部分包含在table标签内,对table设置margin-left:auto;和margin-right:auto;就可以使table水平居中,间接使需要居中的部分水平居中。
缺点:增加了无语意标签,加深了标签的嵌套层数。
方法二:
改变块级元素display为inline类型,然后使用text-align:center来实现居中。
较方法一,好处是不用增加无语义标签,简化了标签的嵌套深度。坏处,将块级元素的display类型改为inline,缺少了一些块级元素的功能,比如高宽。
方法三:
通过给父元素设置float,然后父元素设置position:relative和left:50%,子元素设置position:relative和left:-50%来实现水平居中。
可以保留块级元素仍以display:block的形式显示,而且不添加无语义标签,不增加嵌套深度,但缺点是设置了position:relative,带来一定的副作用。
2.垂直居中
(1) 父元素高度不确定的文本、图片、块级元素的垂直居中
通过给父容器设置相同上下边距实现的,即设置padding-top和padding-bottom。
(2)父元素高度确定的单行文本的垂直居中
通过给父元素设置line-height来实现,line-height值和父元素高度值相同。
(3)父元素高度确定的多行文本、图片、块级元素的垂直居中
CSS中有一个用于垂直居中的属性vertical-align,但只有当父元素为td或者th时,这个属性才生效,对于其他块级元素,如p,p等,默认情况下是不支持vertical-align属性的。在firefox和ie8下,可以设置块级元素的display:table-cell来激活vertical-align属性,但ie6和ie7并不支持display:table-cell。
方法一:
直接使用table,因为td标签默认下就隐式设置了vertical-align:middle。
方法二:
对支持display:table-cell的ie8和firefox用display:table-cell和vertical-align:middle来实现居中,对不支持display:table-cell的ie6和ie7,使用特定格式的hack。
p如何显示在浏览器外?
自己体会一下吧。
#myp {
background-color: #FFCC66;
border: 1px solid #f00;
text-align: center;
line-height: 40px;
font-size: 12px;
font-weight: bold;
z-index:99;
width: 300px;
height: 120px;
left:50%;/*FF IE7*/
top:50%;/*FF IE7*/
margin-left:-150px!important;/*FF IE7 该值为本身宽的一半 */
margin-top:-60px!important;/*FF IE7 该值为本身高的一半*/
margin-top:0px;
position:fixed!important;/*FF IE7*/
position:absolute;/*IE6*/
_top: expression(eval(document.compatMode &&
document.compatMode==’CSS1Compat’) ?
documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
document.body.scrollTop + (document.body.clientHeight – this.clientHeight)/2);/*IE5 IE5.5*/
}
css样式中遇到!important?
假如我要对一个p在IE7中宽为200px,在IE6中宽180px,则:
p { width:200px !important; }
p { width:180px; }
!important:表示某条属性(声明)具体最高的优化级,所以虽然看起来下面的把上方的属性覆盖了,但真正由于上面度200的优化级最高,所以最后p的宽还是200px
!important:IE7及以上、Firefox都支持,但IE6不支持,所以下面的属性会把上面的覆盖,即在IE6宽显示为180px
设置此项主要的目的就是为了达到在各种及各版本的浏览器之间兼容,这里如果考虑周全的话还需对IE7及FF进行区别了
!important 表示高优先级。
IE6浏览器不认识 !important 。
举例:
正常情况下,写在下面的样式优先级高于上面的样式
demo1{
color:red;
color:green; /*绿色的优先级高于红色,所有浏览器都会显示绿色*/
}
加了!important 那么它的优先级会比较高,ie6比较傻,不认识。
demo2{
color:red !important; /*除了ie6,其他浏览器会认为红色优先级高,显示红色字体*/
color:green; /*ie6浏览器则顺序读取css所以显示绿色*/
}
但是注意,IE6不认识!important的优先级,但并不代表IE6不认识带!important的样式属性。
demo3{
color:red;
color:green !important; /*包括IE6,所有浏览器都显示绿色字体,ie6只是不认识优先级罢了*/