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](https://img.haomeiwen.com/i1785100/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%;