CSS知識

CSS知識

標簽(空格分隔): CSS布局


圖片垂直居中于元素

<!--css start-->
* {
    box-sizing: border-box;
}

.content {
    display: table;
    border: 1px solid #06c;
    padding: 15px 5px;
    max-width: 1000px;
    margin: 10px auto;
    min-width: 320px;
    width: 100%;
}
.img-box{
    height: 150px;
    width: 100px;
    border:1px solid red;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    background-color:#4679bd;
}
<!--css end-->

<!--html start-->
<div class="content">
    <div class="img-box">
        ![logo](http://upload-images.jianshu.io/upload_images/1785100-11efb98a1c40d424.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 
    </div>
</div>
<!--css end-->

外部使用display:table;內部使用display:table-cell;vertical-align:middle;讓圖片居中

css實現文字超出后,省略號

1.overflow:hidden;
2.text-overflow:ellipsis;
3.-o-text-overflow:ellipsis;
4.white-space:nowrap;
5.width:100%;

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • CSS 層疊樣式表(表示層) 一、CSS引入方式 1.CSS行內樣式 直接使用style屬性 style=”wid...
    Lizzy95閱讀 384評論 0 1
  • CSS3資料員 http://tympanus.net/codrops/css_reference 解決移動端邊框...
    貞貞姐閱讀 398評論 0 3
  • 盒子模型 box-sizing box-sizing有三個屬性:content-box(default),bord...
    二吊子程序媛閱讀 442評論 2 2
  • 第一章。媽媽都曾年輕過 與媽媽生活的這二十三年里,她給我的印象中,那就是,上得廳堂...
    向陽的啊馨閱讀 104評論 0 2
  • 近日,一個名叫“中國信用黑名單”的網站公布了4000多條網貸逾期人員的姓名、身份證號碼、本人電話、家庭住址等個人相...
    悟空說閱讀 1,185評論 0 0