在日常学习和工作中,你是否经常觉得时间不够用?为了帮助你提高效率,今天,就为大家分享一些CSS小技巧,如果你感觉有用,也可以收藏与分享给你的小伙伴们~
1. 文字水平居中
将一段文字置于容器的水平中点,只要设置text-align属性即可:
text-align:center;
2. 容器水平居中
先该容器设置一个明确宽度,然后将margin的水平值设为auto即可。
div#container {
width:760px;
margin:0 auto;
}
3. 文字垂直居中
单行文字的垂直居中,只要将行高与容器高设为相等即可。
比如,容器中有一行数字。
然后CSS这样写:
div#container
{height: 35px;
line-height: 35px;
}
如果有n行文字,那么将行高设为容器高度的n分之一即可。
4. 容器垂直居中
比如,有一大一小两个容器,请问如何将小容器垂直居中?
首先,将大容器的定位为relative。
div#big{
position:relative;
height:480px;
}
然后,将小容器定位为absolute,再将它的左上角沿y轴下移50%,最后将它margin-top上移本身高度的50%即可。
div#small {
position: absolute;
top: 50%;
height: 240px;
margin-top: -120px;
}
5. css中强制不换行代码是white-space:nowrap
这个属性声明建立布局过程中如何处理元素中的空白符。值 pre-wrap 和 pre-line 是 CSS 2.1 中新增的。
属性值:
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的
标签。
nowrap 文本不会换行,文本会在在同一行上继续,直到遇到
标签为止。
pre-wrap 保留空白符序列,但是正常地进行换行。
pre-line 合并空白符序列,但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。