animierte Bild driftet von der Mitte, wenn Fenster schrumpft

Question

Es gibt ein Wettersymbol, das soll zentriert bleiben, wenn der Browser schrumpft (d. H. Auf dem Handy angezeigt werden), aber es driftet nach rechts. Irgendwelche Ideen, wie man es beheben kann? http://codepen.io/perrylivingston/full/JXqKWv/

<img id="partly_cloudy" src="http://icons.iconarchive.com/icons/icons8/android/512/Weather-Partly- Cloudy-Day-icon.png"> 
<div style:"text-align:center" id="the_weather"></div> 
<!--<h1 style="text-align:center" id="demo_data">72&deg</h1> 
<h5 style="text-align:center">BOSTON, MA</h5> 
<h5 style="text-align:center">PARTLY CLOUDY</h5> 
<h5 style="text-align:center">22&degC</h5>--> 

<button class="js-geolocation"> Use Location</button> 
<div style="text-align:center"><a href="https://twitter.com/share" class="twitter-share-button" data-text="I know the weather outside thanks to @Perryodical" data-size="large" target="_blank">Tweet</a></div> 

CSS

body { 
background-image: url("http://www.psdgraphics.com/file/blue-sky.jpg"); 
background-size: cover; 
height: 100%; 
width: 100%; 
} 

#the_weather { 
width: auto; 
text-align: center; 
margin: 0px auto; 
text-transform: uppercase; 
color: #000; 
} 
/*#demo_data { 
padding-top: 120px; 
color: #000; 
} 
h5 { 
color: #000; 
font-weight: bold; 
} 
*/ 
@-moz-keyframes floating { 
from {-moz-transform:translate(0, 1px);} 
to {-moz-transform: translate(0, -10px);} 
} 

@-webkit-keyframes floating{ 
from {-webkit-transform:translate(0, 1px);} 
to {-webkit-transform: translate(0, -10px);} 
} 

#partly_cloudy { 
width: 80px; 
height: auto; 
position: absolute; 
left: 50%; 
margin-left: -2.4%; 
margin-top: 30px; 
-moz-animation-name:floating; 
-moz-animation-duration: 1s; 
-moz-animation-iteration-count: infinite; 
-moz-animation-direction: alternate; 
-moz-animation-timing-function: ease-in-out; 
-webkit-animation-name:floating; 
-webkit-animation-duration: 1s; 
-webkit-animation-iteration-count: infinite; 
-webkit-animation-direction: alternate; 
-webkit-animation-timing-function: ease-in-out; 
} 

@font-face { 
font-family: 'the_weather'; 
src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.eot'); 
src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.eot?#iefix') format('embedded-opentype'), 
    url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.woff') format('woff'), 
    url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.ttf') format('truetype'), 
    url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.svg#artill_clean_weather_iconsRg') format('svg'); 
} 


i { 
color: #efcc3a; 
font-size: 160px; 
font-weight: normal; 
font-style: normal; 
} 

#the_weather li { 
display: block; 
font-weight: bold; 
padding: 5px; 
} 
/*WI portion of simpleweather.js not supported without paid subscription */ 
/* 
.icon-0:before { content: ":"; } 
.icon-1:before { content: "p"; } 
.icon-2:before { content: "S"; } 
.icon-3:before { content: "Q"; } 
.icon-4:before { content: "S"; } 
.icon-5:before { content: "W"; } 
.icon-6:before { content: "W"; } 
.icon-7:before { content: "W"; } 
.icon-8:before { content: "W"; } 
.icon-9:before { content: "I"; } 
.icon-10:before { content: "W"; } 
.icon-11:before { content: "I"; } 
.icon-12:before { content: "I"; } 
.icon-13:before { content: "I"; } 
.icon-14:before { content: "I"; } 
.icon-15:before { content: "W"; } 
.icon-16:before { content: "I"; } 
.icon-17:before { content: "W"; } 
.icon-18:before { content: "U"; } 
.icon-19:before { content: "Z"; } 
.icon-20:before { content: "Z"; } 
.icon-21:before { content: "Z"; } 
.icon-22:before { content: "Z"; } 
.icon-23:before { content: "Z"; } 
.icon-24:before { content: "E"; } 
.icon-25:before { content: "E"; } 
.icon-26:before { content: "3"; } 
.icon-27:before { content: "a"; } 
.icon-28:before { content: "A"; } 
.icon-29:before { content: "a"; } 
.icon-30:before { content: "A"; } 
.icon-31:before { content: "6"; } 
.icon-32:before { content: "1"; } 
.icon-33:before { content: "6"; } 
.icon-34:before { content: "1"; } 
.icon-35:before { content: "W"; } 
.icon-36:before { content: "1"; } 
.icon-37:before { content: "S"; } 
.icon-38:before { content: "S"; } 
.icon-39:before { content: "S"; } 
.icon-40:before { content: "M"; } 
.icon-41:before { content: "W"; } 
.icon-42:before { content: "I"; } 
.icon-43:before { content: "W"; } 
.icon-44:before { content: "a"; } 
.icon-45:before { content: "S"; } 
.icon-46:before { content: "U"; } 
.icon-47:before { content: "S"; } 
*/ 
#the_weather ul { 
margin: 0; 
padding: 0; 
} 

button { 
display: block; 
margin: 15px auto; 
width: 140px; 
padding: 5px; 
background:#efcc3a; 
color: #0; 
font-weight: bold; 
border: 0; 
border-radius: 5px; 
} 
button:hover { 
background-color: #ed8e0e; 
} 
button:active { 
color: rgb(217, 217, 217); 
} 
.twitter-share-button { 
text-align: center; 
box-shadow: 5px 5px 2.5px; 
margin-bottom: 15px; 
} 

Javascript

if ("geolocation" in navigator) { 
$('.js-geolocation').show(); 
} else { 
$('.js-geolocation').hide(); 
} 

$('.js-geolocation').on('click', function() { 
navigator.geolocation.getCurrentPosition(function(position) { 
loadWeather(position.coords.latitude+','+position.coords.longitude); 
}); 
}); 


$(document).ready(function() { 
loadWeather('New York',''); 
}); 

function loadWeather(location, woeid) { 
$.simpleWeather({ 
location: location, 
woeid: woeid, 
unit: 'f', 
success: function(weather) { 
    html = '<h2><i class="icon-'+weather.code+'"></i> '+weather.temp+'&deg;'+weather.units.temp+'</h2>'; 
    html += '<ul><li>'+weather.city+', '+weather.region+'</li>'; 
    html += '<li class="currently">'+weather.currently+'</li>'; 
    html += '<li>'+weather.alt.temp+'&deg;C</li></ul>'; 

    $("#the_weather").html(html); 
}, 
error: function(error) { 
    $("#the_weather").html('<p>'+error+'</p>'); 
} 
}); 
} 

Answer 1

#partly_cloudy { 
width: 80px; 
height: auto; 
position: absolute; 
left: 0; 
right: 0; 
top: 0; 
bottom: 0; 
padding-top: 50px; 
margin: 0 auto; 
-moz-animation-name:floating; 
-moz-animation-duration: 1s; 
-moz-animation-iteration-count: infinite; 
-moz-animation-direction: alternate; 
-moz-animation-timing-function: ease-in-out; 
-webkit-animation-name:floating; 
-webkit-animation-duration: 1s; 
-webkit-animation-iteration-count: infinite; 
-webkit-animation-direction: alternate; 
-webkit-animation-timing-function: ease-in-out; 
} 

dies versuchen, tho es ein Problem ist, weil das Symbol auf dem #the_weather seiner Wahl auf, wie du entwirfst es. Grüße.

UPDATE:
- margin-top: 30px;-padding-top: 50px;
-Icon auf dem #the_weather. Fest.