已知元素寬高實現元素水平垂直居中
//子元素定位上下左右都為0,margin:auto自適應
未知元素實現元素水平垂直居中
居中//子元素定位到父元素的中間,再往回移動自身寬高的50%;
單行文字溢位隱藏
overflow: hidden;text-overflow: ellipsis;溢位顯示省略號
white-space: nowrap;//文字不換行
多行文字溢位隱藏
overflow: hidden;/*文字超出隱藏
*/display:-webkit-box;
/*盒子模型微彈性伸縮模型
*/-webkit-box-orient: vertical;
/*伸縮盒子的子元素垂直排列
*/-webkit-line-clamp: 3;
/*文字顯示3行
*/
元素垂直居中和水平居中
在此之前先要設定好高度和寬度 要是單行資料 垂直居中 1 可以用傳統的line height和height相等就可以 2 使用vertical align middle 此時該元素的display要設定為table cell,並且子元素必須是行級元素才可以。水平居中 1 text align cen...
水平居中和垂直居中
行內元素 為該行內元素的父元素新增設定text align center 塊級元素 為其自身設定margin auto樣式 子元素是行內元素 設定父元素的line height為其自身盒子的高度 子元素是塊級元素但子元素高度沒有設定 設定父元素是 display table cell vertica...
元素水平居中和垂直居中的方式
關於居中的問題,一直處於疑惑不解的狀態,知道的幾種方法好像也不是每一次都會起到作用,所以更加迷惑。主要是不清楚該 在什麼情況下採用哪種解決方法,所以,整理了一些方法,梳理一下思路,做乙個總結。對於單行文字,可以設定它的行高等於它父容器的高度,這樣就實現了該文字的垂直居中,但是此方法只適用於單行文字。...