inline-block

現在inline-block貌似可以替代float來實現多個item的排列分佈吧

div是塊級元素，如果不設置他的明確的寬度，那他就等於父元素的寬度，如果想讓他其它隨著子元素的變化而變化，需要改變他的css diplay屬性為inline-block

可包裹div容器

inline-block：img input

inline-block來實現圖片垂直水平居中

<a>

　　<img src=''/>

</a>

a:display:inline-block vertical-align:middle，text-align：center

就可以實現圖片在a標簽裡面水平垂直居中了

但是好像實現不了垂直居中，給a標簽設置一個高度的時候，圖片並沒有直接就垂直居中了

然後又是一個知識點vertical-align:middle

這個垂直居中的，我一開始還以為跟text-align:center一樣的用法一樣的作用，後面發現並不是這樣的 我去

如果一個

<div>

　　<div style='vertical-align:middle;display:inline-block'>1213</div>

</div>

以為這樣應該可以垂直居中啊

發現並不是

我感覺我的理解就是這個vertical-align的基線是跟自己的兄弟元素來的

如果在大的div裡面再設置一個空的div

<div class='container>

　　<div style='vertical-align:middle;display:inline-block'>1213</div>

　　<div style='display:inline-block;vertical-align:middle;height:100%;width:0'></div>

</div>

然後我的理解就是這個1213的這個div就是按照他的這個width:0.height:100%的兄弟節點來垂直居中的

恩恩 這樣是可以實現垂直居中的效果

新建一個差不多就是空的div吧，但是height一定要是父元素的100%哦 因為你是想這個元素在父元素裡面實現垂直居中的喔

哦哦，貌似可以不用新建一個div喔，好像看資料可以用：after這個偽類來代替這個新的div

.container:after{diaplay:inline-block;content:'',width:0;height:100%;vertical-align:middle}

哈哈 有興趣的小伙伴可以試試

恩恩 還有什麼我沒有想到的 你又剛好知道的

可以給我留言哦

哈哈哈

vertical-align:middle好像太 博大精深了吧

一個段落在多行文字裡面實現垂直居中

<div class='container'>
<span>多行文字垂直居中多行文字垂直居中多行文字垂直居中多行文字垂直居中多行文字垂直居中多行文字垂直居中</span>
</div>

<style type="text/css">
.container{
height:500px;
width:200px;
display: table-cell;
vertical-align: middle;
}
.container span{
font-size: 16px;
vertical-align: middle;
}
</style>

這個vertical-align:middle好像是display單元格裡面設置vertical-align:middle裡面的內容就會實現垂直居中的效果