center - 可変数の他の html 要素の中で 1 つの html 要素を中央に配置する

Question

スパン要素を含む動的メニューがあります。私のスクリプトでは、このメニューを更新できるため、このメニューにはこれらのスパン要素を多く/少なく含めることができます。これらのスパン要素には、可変長の文字を持つページタイトルが含まれています。これらのスパンはすべて水平に配置されています。

私がやろうとしているのは、これらすべてのスパンを中央に配置することです (これは簡単です)。ただし、可変数のスパンの中で常に中間にあるように 1 つのスパンが必要です。このスパンは空のスペーサーとして使用されます。

なんで？さて、それは私が取り組んでいるデザインです。このメニューの中央には画像が重なっており、スパンが重なっています。「常に中央に配置されたスパン」を使用して、メニューにスペーサーを作成しようとしているので、どのスパンもこの画像の背後にありません。

これまでのhtml：

<div class = 'header'>
    <div class = 'header_image'>
        <img src = 'centerd_image.jpg' />
    </div>
    <div class = 'header_menu'>
        <span>the empty spacer</span>
        <span>menu1</span>
        <span>menu2</span>
        <span>menu3</span>
        <span>menu4</span>
    </div>
</div>

これまでのCSS：

.header{
background-color: #90a9c4;
border-bottom: solid #728eac 25px;
position: fixed;
width: 100%;
z-index: 1;
height: 46px;
}

.header_image{
width: 123px;
height: 89px;
position: absolute;
left: 50%;
margin-left: -61px;
z-index: 3;
}

.header_menu {
position: relative;
z-index: 2;
text-align: center;
margin-top: 50px;
}

どうすれば入手することができますか

<span>the empty spacer</span>

常にこれら 4 つ (またはそれ以上!) の真ん中にいること

<span>menu1</span>
<span>menu2</span>
<span>menu3</span>
<span>menu4</span>