画像と横線で見出しを作る方法

.heading {
    text-align: center;
    width: 90%;
    margin:0 auto;

    /* 横線の設置 & z-indexのため */
    position: relative;


    /* 外枠(実際に使用するときは不要) */
    border: 1px solid #f00;
}

.heading::before {
    content: '';

    /* 横線の色とサイズ */
    width: 100%;
    height: 1px;
    background-color: #ccc;

    /* 横線の設置 */
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 1; /* 線は画像よりも奥に表示する */
}

.heading span {
    /* 画像の周りを白枠にして、線を消す */
    background-color: #fff;
    padding: 10px;

    /* 幅と高さを確保する */
    display: inline-block;

    /* 画像は線よりも手前に表示する */
    position: relative;
    z-index: 2;
}

.heading img {
    width: 75px;
    height: 75px;
}