Center-aligning without using HTML tables - html

Question

Alright, so I'm trying to make div elements align down the middle (between two images) without using tables (because tables shouldn't be used for styling/layout).
I have the following individual elements:
img
img
div
And I want the final output, using CSS, to be:
Seems simple, right? Well, the trick is that the scores to the left and right of the images are variable width, and I want the center of the rounded rectangle to slice right between the two images, regardless of the widths of the score values. (Thus, I can't just wrap a div around the whole block and use text-align: center. Would do me no good.)
As you can see in my example pic, there is more space between the edge of the rectangle and the score on the right than there is on the left, because the left score itself is wider.
Also note that the images expand slightly above and below the rectangle div, which is another reason why using a table wouldn't be ideal.
I've tried to accomplish this layout using combinations of margin-left: auto, margin-right: auto, display: inline-block, etc., but I can't get the centered effect I'm looking for.
Here is a jsfiddle to play with.
Your help is greatly appreciated!

Answer 1

Here's the deal:
.team should have width: 50% and should be floated left. Or right. Whatever.
The images should be floated toward the center. The one on the left should be floated right, the one on the right should be floated left.
The images should also have position: relative and a negative top.
.team should also have text-align set. The one on left should have text-align: right
The outer container should have overflow set to visible (which is the default - I just wanted to mention it because other answers told you to use overflow: hidden. Which would break your "outside the box" stuff).
That should get you what you want. And here's proof (started before you posted your fiddle)

Answer 2

UI elements (things that are not content) should be CSS backgrounds. Make a composite image and make it the background for a wrapping DIV, then make two inside it - one floated left, the other floated right and with a bit of margin and padding everything will work just fine.
<div class="wrapper">
<div class="scoreLeft"></div>
<div class="scoreRight"></div>
</div>

Answer 3

All of the inner child elements of your div should have float: left. Then, the parent div should have overflow: hidden. From there, you can then add additional margin's to the div img elements.

Answer 4

Here is an example solution. The idea is that you have a wrapper do the grey background and size the bar. You than have a div half the size and align the text towards the center while putting enough padding to allow for background images.
HTML
<div class="wrapper">
<div class="scoreLeft">1231231</div>
<div class="scoreRight">123</div>
</div>
CSS
.wrapper {
background: grey;
background-image:url('http://i.stack.imgur.com/4fkZv.png');
background-size:400px 50px;
height: 50px;
width: 400px;
display: table; //Allow for vertical align
table-layout: fixed; //Allow for fixed widths of children
}
.scoreLeft, .scoreRight {
color: white;
display: table-cell; //Allow for vertical align
vertical-align: middle;
width: 50%;
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; //Allow for 50% width with padding sitting inside the 50%. This can be mathed out so the width + padding * 2 = wrapper width and then you can use the default box-sizing.
}
.scoreLeft {
background-image:url('http://i.stack.imgur.com/CmWiD.png');
background-size:50px 50px;
background-repeat: no-repeat;
background-position:right;
text-align: right;
padding-right: 55px;
}
.scoreRight {
background-image:url('http://i.stack.imgur.com/Gkll9.png');
background-size:50px 50px;
background-repeat: no-repeat;
padding-left: 55px;
}