使用padding来合理布局自己的容器类

这两天一直忙着前端UI的事，前端布局这块下了很多工夫，很多第三方布局框架如Bootstrap和layUI等虽然很好使用，但是前端你懂的，实际用起来总得缝缝补补，烦啊。

今天就遇到了一个要让div容器内的元素居中对齐的需求，虽然其他的框架样式也很多，但是不适合我的情况，于是就想办法自己改样式，终于发现了一个方法：就是padding（容器内补）

之前是这样的：

<div class="media" style="border: 1px solid #ddd;">
  <div class="media-left pull-left">
   	<div><img style="border: 1px solid red; width: 60px; height: 60px;" class="img-circle img-responsive" src="img/logo.png" /></div>
  </div>
  <div class="media-body">
    <div>content</div>
  </div>
  <div class="media-right" >
	<div><i class="fa fa-angle-right fa-lg"></i></div>
  </div>
</div>

　　页面是这样的：

最后想起来：干脆自己做个div容器自己加上对应的内补不就好了吗，这样就能自己调整居中位置了。

<div class="media" style="border: 1px solid #ddd;">
  <div class="media-left pull-left" style="border: 1px solid red;">
   	<div><img style="border: 1px solid red; width: 60px; height: 60px;" class="img-circle img-responsive" src="img/logo.png" /></div>
  </div>
  <div class="media-body" >
    <div style="padding: 18px 15px">content</div> //加上padding，让自己的元素在自己的容器内看起来居中，自己的div容器则在bootstrap的容器中自适应，不用关心
  </div>
  <div class="media-right" style="padding: 18px 15px">
	<div><i class="fa fa-angle-right fa-lg"></i></div>
  </div>
</div>

　　最后页面居中了