样式居中 + 超出省略
评论 0 热度 517
水平居中
不定宽度的居中一般添加display: table;margin: 0 auto;
属性即可
我常用的还是:max-width:800px;margin: 0 auto;
,这样写响应式的时候方便一点点,如果确定了宽度的话,就要多写几个@media
垂直居中
垂直居中比较难一些。
行内元素
通过vertical-align: middle
实现CSS垂直居中是最简便的方法,但是元素的display必须是inline-block。
利用table
#parent {display: table;}
#child {
display: table-cell;
vertical-align: middle;
}
设定position
#parent{
position: relative;
}
#child{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 50%;
height: 35%;
margin: auto;
}
通过JS锁定
var f=document.getElementById("f");
var w=f.offsetWidth;
var h=f.offsetHeight;
f.style.position="absolute";
f.style.left="50%";
f.style.top="50%";
f.style.marginLeft=-(w/2)+"px";
f.style.marginTop=-(h/2)+"px";
超出省略
.oe{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
}
有溢出的时候就会自动现实省略了,有display:inline
的时候无效,这个很少用,用起来的时候老是忘记。