元素水平垂直居中和文字溢位隨筆

2022-09-30 16:33:15 字數 542 閱讀 2468

已知元素寬高實現元素水平垂直居中

//子元素定位上下左右都為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...

元素水平居中和垂直居中的方式

關於居中的問題,一直處於疑惑不解的狀態,知道的幾種方法好像也不是每一次都會起到作用,所以更加迷惑。主要是不清楚該 在什麼情況下採用哪種解決方法,所以,整理了一些方法,梳理一下思路,做乙個總結。對於單行文字,可以設定它的行高等於它父容器的高度,這樣就實現了該文字的垂直居中,但是此方法只適用於單行文字。...