关于html布局问题。

Question

     <header>
      
        <a href="#"><img src="images/back.png" class="left" ></a>
        //中间放置什么元素比较好一些呢，用div会把右边的图片顶下去转成行内元素又不接受宽高（我不想用flex），谢谢！
         
          <a href="#"><img src="images/home.png" class="right"></a> 
          
     </header>        
         
     html{ font-size:625%}
     
    .clear{ clear:both;}
    
    *{ margin:0;
       padding:0;
       font-size:0.12rem;}
       
    header{ width:100%;
            height:0.51rem;
            background:#f8f9fa;}
          
    header{ text-align:center;
            font-size:0.18rem;
            line-height:0.51rem;
            font-weight:600;}
            
    
    .left{ float:left;
           margin-left:0.15rem;
           margin-top:0.10rem; }
           
    .right{ float:right;
            margin-top:0.10rem;  
            margin-right:0.15rem;} 

Answer 1

div元素居中定位

Answer 2

使用display:inline-block，能解决你的问题

<style>
    .header-center {
    width: 70%;
    margin: 0 auto;
    line-height: 1.5;
    display: inline-block;
    }
</style>
<header>
    <a href="#"><img src="images/back.png" class="left"></a>
    <div class="header-center">//中间放置什么元素比较好一些呢，用div会把右边的图片顶下去转成行内元素又不接受宽高（我不想用flex），谢谢！</div>
    <a href="#"><img src="images/home.png" class="right"></a>
</header>

Answer 3

如果你有用到boostrap，可以参考里面的栅格，很方便

Answer 4

左右两边用绝对定位 中间用div padding出两个图片的位置

Answer 5

首先将div元素居中，然后将两个位置用display:inline-block;