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里面的内容就会实现垂直居中的效果