Center align text and image horizontally where text length can vary

I have a div within which I have to place an icon and some text to the right of it, and arrange the entire thing such that both of them together remain center aligned (there is a small gap between the image and text). Problem is, the text length can vary. So if it is a short text like Libya, the entire element will huddle close to the center, while if it is a big text like Bosnia and Herzigovina, it will spread out (while still centered), the image inching close towards the left. I tried this:

<div class='container'>
  <div class='imagetext'>
    <img class='location-icon' src="http://images.clipartpanda.com/blue-location-icon-Location-Icon-Blue.png" />
    <span class='location-text'>
        Bosnia and Herzigovina
    </span>
  </div>
</div>

And the CSS:

.container {
  width: 260px;
  height: 298px;
  background: yellow;
}

.imagetext {
  width: 100%;
  height: 20px;
  background: green;
  position: relative;
  top: 50px;
  text-align: center;
}

.location-icon {
  width: 20px;
  display: inline-block;
  margin-right: 5px;
  float: left;
}

.location-text {
  font-size: 12px;
  display: inline-block;
  float: left;
  position: relative;
  top: 5px;
}

body {
  background: white;
  font-family: sans-serif;
}

This is the fiddle - https://jsfiddle.net/d8t9e0p6/3/. I am unable to center it even with text-align set to center. How do I achieve the correct center alignment?

I updated it https://jsfiddle.net/d8t9e0p6/4/

you had to put text-align center on the container, and the imagetext container needed width auto and display inline-block;

.container {
  width: 260px;
  height: 298px;
  background: yellow;
  text-align:center;
}

.imagetext {
  width:auto;
  height: 20px;
  background: green;
  position: relative;
  top: 50px;
  text-align: center;
  display:inline-block;
}