-
当父元素内只有一个行内元素时，我们会在父元素上添加line-height和text-align，使得行内元素居中，但是，当我们遇到连个高度不一的行内元素时，会怎么样呢？
我们需要在长的元素上加上vertical-align:top
http://js.jirengu.com/gumuy/3/edit?html,css,output
张鑫旭
因为行内元素是自适应的，所以文字在里面应该是垂直居中的，但有时会因为font-weight，font-family变得不太垂直居中。 -
line-height和height的不同
a. line-height的适用元素是所有的元素，而height不能在行内元素上有作用。
b. 当我们使用line-height时，里面的文字能够居中放置。
c. 当我同时使用height和line-height时，块级元素的高度以height为准。而行内元素height没有作用，所以line-height为占据空间大小，若line-height小于文字自适应高度，line-height的高度为大。注意若将line-height设为0，似乎没有什么作用。
总结一下：在块级元素上时，height > line-height > 文字自适应。
在行内元素上时，line-height > 文字自适应。当然其实我们一般都会把line-height和height一样大，所以不用考虑那么多。
这是我们使用line-height时的情况，对于行内元素而言，虽然边界依然是包裹着文字，但是我们可以看到，line-height已经有了作用，占据了网页的空间。
http://js.jirengu.com/juvuj/4/edit
- 关于height: 100% （width相同，另外100%是指占满content）
MDN上的定义，<percentage>相对于元素的块容器高度，如果块容器的高度没有显式指定，计算值为 auto。
从上面这句话我们可以看出如果父元素设置了height=100px，子元素的设置高度height:100%,那么子元素的高度是100px。如果父元素是自适应的，没有设置高度，那么子元素的高度设置成height:100%也依然是自适应的。
例子
a.遇到position:absolute时的情况
若父元素依然是自适应，而子元素设置position:absolute和height：100%，这时子元素的高度会是父元素高度的100%。
例子
b.遇到position:fixed的情况与上面类似，其高度是相对屏幕的了。
- 两个行内元素的垂直居中问题。
对于这种情况，我一般直接用flex就可以很容易的解决。
打对于这种情况，既需要居中，icon和文字还纠缠在一起。我只能外层用的flex，里面用的vertical-align:top和margin解决的。而老师用的是display:table和table-cell，vertical-align:middle解决的。
5.sticky-footer
6.float也能居中
在购物车详情的头部中，我们使用了float，利用float的性质也很好的实现了居中。
- 在8-3中我们设置padding-top:100%，这时padding-top的大小等于width（黑科技）
网友评论