将一个div中的两个P元素同一行居中显示

<style  type="text/css">
.header{
     width:100%;
     float:left;
     height:60px;
}
.p1{
     float:left;  ====或者 替换为  display:inline;   两者的作用都是将块级元素转为行内元素，破坏原本的格式
     background-image:url(../../images/png.png);
     background-repeat:no-repeat;
     background-position:0 0;
     width:60px;
     height:60px;     
     overflow:hidden;    p1中最后三行的作用：缩小图片的可视化区域，超出指定大小的区域隐藏，控制显示图片的一部分
}
 .p2{
     float:left; ====  或者 替换为  display:inline;   两者的作用都是将块级元素转为行内元素，破坏原本的格式
     width:30%;
     height:60px;
     text-align:left; 
     line-height:60px;
}
</style>
<div class=“header">
 <p  class="p1" ></p>
 <p  class="p2 "> 首页大标题</p>
</div>
注： 只有当p1 和 p2 同时左浮动，才会显示在同一行， 最外层和里层的高度要一致，两个p要居中显示，那么就要设置p2的line-height,高度和p1的高度一致，才能保证居中显示