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: %; height: 40px; padding:  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:  10px; font-size: 15px; color: #;}

.forshow .img_setH img{ width: 13px; height: .5px; display: inline-block; margin-right: 5px;}

.forshow .flex{ -webkit-box-flex: ; -webkit-flex: ; -ms-flex: ; flex: ; height: 1px; background: #cccccc;

    -webkit-box-sizing: border-box;  -o-box-sizing: border-box;  -ms-box-sizing: border-box;  box-sizing: border-box;}

我们用了盒子模型进行布局