中下层内容摘要
虽然以内容为中心和以div为中心的问题已经成为一个老话题,但最近许多开发者被问到如何实现它,事实上,网络上有很多信息和案例,我将总结一些更常见的方法来处理它。
案例1:div限制很高,内容长度限制在一行上。
复制代码代码如下所示:
{。v-align
保证金:0汽车;
宽度:200px;
身高:80px;
文本对齐:中心;
行高:80px;
边境:1px solid # DDD;
}
我只能在我的内容中有一行。
案例二:div有限,内容不限。
复制代码代码如下所示:
{。v-mult
保证金:0汽车;
宽度:200px;
身高:100px;
边境:1px solid # DDD;
溢出:隐藏;
}
v-mult.empty,
v-mult.text {。
显示:内联块;
*显示:内联;
*缩放:1;
垂直对齐:中间;
}
v-mult.empty {。
身高:100%;
}
我的内容不受限制,那么高。
改变线
案例三:div非常不确定,内容很高。
复制代码代码如下所示:
{。v-auto
职位:相对;
保证金:0汽车;
宽度:200px;
边境:1px solid # DDD;
}
v-auto.text {。
位置:绝对;
顶部:50%;
边距:- 50px;
身高:100px;
边境:1px冲# DDD;
}
我的身高是固定的,只有100px是高的,但是我的父亲和高度不确定。我怎么能在中间呢
案例四:div非常不确定,内容非常不确定。
复制代码代码如下所示:
{。v-auto-out
职位:相对;
保证金:0汽车;
宽度:200px;
边境:1px solid # DDD;
}
v-auto-out.auto-in {。
位置:绝对;
顶部:50%;
边境:1px冲# DDD;
存在兼容性问题。
WebKit的变换:translatey(- 50%);
MS:translatey变换(50%);
- o-transform:translatey(- 50%);
translatey变换:(50%);
}
我的身高不是固定的,我爸爸和身高都不固定,这是上下中间,我该怎么办让我们一起来看一看。
好了,知道这四种方式,我相信这足以应付各种我日常工作中垂直的中心问题,代码很简单,没有更多不必要的论述。总之,各种CSS属性类似人类肢体的所有器官,并了解各脏器的功能,所以我们可以相互合作来完成各种任务。相反,个人的能力是有限的。