centre an element without fixing width and without breaking layout

[KSE]

It's a lot of code so I created a jfiddle as an example:http://jsfiddle.net/8FuyF/I have a h1 and within this h1 I have the top part of the title and the bottom part. These need to be centered but without fixing the width because they will be dynamic. The problem is the way that I have done it breaking the layout, I have coloured the parts in jfiddle so you can see, is there anyway I get round this problem, so that the span doesn't break the layout?Thanks!\[code\]<div id="container"> <h1> <span class="top"> <span class="top-center"> Welcome to </span> </span> <span class="bottom"> <span class="inner"> <span class="left">&nbsp;</span> <span class="main">Company name</span> <span class="right">&nbsp;</span> </span> </span> </h1></div>#container { width:940px; margin:0 auto; background-color:#006699; height:500px;}h1 span.top { background-image: url("assets/img/bullet.png"); background-position: 50% 50%; background-repeat: no-repeat; display: block; float: left; font-family: 'Pacifico',cursive; font-size: 1.875em; height: 30px; left: 50%; margin-bottom: 25px; margin-top: 66px; padding-right: 42px; position: relative; text-align: center;}h1 span.bottom { clear: both; display: block; float: left; height: 47px; left: 50%; margin-top: 12px; position: relative; text-align: center; background-color:#CC6600;}h1 span.bottom .inner { clear: both; display: block; float: left; height: 47px; left: -50%; position: relative; text-align: center;}h1 .left { border-bottom: 1px solid #000; display: inline-block; left: -25px; position: absolute; top: 22px; width: 22px;}h1 span.main { border-bottom: 1px solid