一行居中问题

在平时的工作中 ，我们经常会遇到同一行不同大小文字和div居中的情况，下面来总结一下：

html结构如下：

    left
    right

.container{border: 1px solid black;}
  .left{font-size: 14px;}
  .right{font-size: 40px;}









我们要实现同一行居中，给两个span添加如下属性  vertical-align: middle;display: inline-block;即可。



.left{font-size: 14px;vertical-align: middle;display: inline-block;}
      .right{font-size: 40px;vertical-align: middle;display: inline-block;}

效果如下：






还有一种情况，外层div定高时，会出现如下效果


这就很尴尬了，那我们给父层也加上样式即可完成居中：

  .container{border: 1px solid black;height: 100px;display: table-cell;vertical-align: middle;}












不同大小div实现方法同上