css橫線中間放圖片或者文字

效果圖：

先貼代碼

HTML:

<div class="forshow middle">
            <div class="flex"></div>
            <div class="img_setH"><img src="shop_orderD_forshow.png">為你推薦</div>
            <div class="flex"></div>
        </div>

這里的圖片路徑換你想要的就可以啦

css：

.forshow{ width: 100%; height: 40px; padding: 0 10px;
    display: flex; display: -webkit-box; display: -moz-box;
    -webkit-box-pack: center; -moz-box-pack: center; -webkit-box-align: center; -moz-box-align: center;
    -webkit-box-sizing: border-box;  -o-box-sizing: border-box;  -ms-box-sizing: border-box;  box-sizing: border-box;}
.forshow .img_setH{ padding: 0 10px; font-size: 15px; color: #333333;}
.forshow .img_setH img{ width: 13px; height: 12.5px; display: inline-block; margin-right: 5px;}
.forshow .flex{ -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; height: 1px; background: #cccccc;
    -webkit-box-sizing: border-box;  -o-box-sizing: border-box;  -ms-box-sizing: border-box;  box-sizing: border-box;}

我們用了盒子模型進行布局