Footer-Element wird durch andere Elemente versetzt

Question

Ich habe seit Stunden damit zu tun und kann nicht herausfinden, was das Problem ist.
Ich habe eine grundlegende lokale Wetter-App, die ich für die Praxis erstellt habe. Wenn ich meine Fußzeile an den unteren Rand der Seite anschließe, wird sie automatisch von der Mitte nach rechts versetzt. Unabhängig von der eingestellten Positionseigenschaft kann ich text-align:center oder margin:auto nicht verwenden, um das Element zu zentrieren.

HTML:

<div id='content-box'> 
    <div id='weather'> 
    <p id='temp'></p> 
    <p id='humidity' class='other'></p> 
    <p id='wind' class='other'></p> 
    <img id='icon' src=''> 
    </div> 
    <p id='location'></p> 
</div> 

<footer>FOOTER</footer> 

CSS:

#content-box{ 
    position:relative; 
    text-align:center; 
    width:33%; 
    margin:auto; 
    height:350px;; 
    background-color:rgba(0,0,0,0.1); 
    border-radius: 35px; 
} 
#weather{ 
    font-size:3em; 
} 
#temp{ 
    position:relative; 
    bottom:50px; 
    float:left; 
    font-size:3em; 
    font-family:Arial; 
    padding-left:20px; 
    color:#329555; 
} 
#temp:hover{ 
    opacity:.8; 
    cursor:pointer; 
} 
span{ 
    font-family:'Raleway', sans-serif; 
} 
.other{ 
    font-size:.5em; 
    width:auto; 
    text-align:right; 
    padding: 10px 20px 0px 0px; 
    font-family:sans-serif; 
} 
#location{ 
    position:absolute; 
    bottom:0px; 
    width:100%; 
    font-size:1.7em; 
    letter-spacing: 8px; 
    font-family:'Raleway'; 
} 
#icon{ 
    position:relative; 
    padding-top:10px; 
    display:flex; 
    float:right; 
    bottom:40px; 
    width:175px; 
} 
footer{ 
    position:relative; 
    margin-top:50px; 
} 

Mein Code ist auch auf codepen, so ist es am einfachsten für eine tatsächlich sein kann the bug in action zu sehen.

Auf das Click-Ereignis, um Fahrenheit in Celsius zu konvertieren, drückt es auch die Fußzeile nach rechts, für die ich auch verloren bin, warum das ist.

Answer 1

Sie können dies versuchen:

<footer> 
<div style=" 
    margin: 0 auto; 
    width: fit-content; 
    width: -webkit-fit-content; 
">Code By Michael Ryan</div> 
</footer> 

Es ist für mich gearbeitet.

Answer 2

CODEPEN Beispiel

Was ich, geändert hatte

footer{ 

    position: relative; 
    clear:both; 

} 

und entfernt alle Ränder und Polsterungen in Körper,

html, body{ 
    height:100%; 
    margin:0; 
    padding:0; 
} 

---

Jetzt können Sie sogar Text ausrichten in Ihrem Fußbereich auch

footer{ 

    position: relative; 
    clear:both; 
    text-align:center; 

} 

CODEPEN Beispiel für Text-align

Answer 3

Verwendung clear: both;

Die klare CSS Eigenschaft gibt an, ob ein Element neben schwimmenden Elemente sein kann, dass es vor oder müssen (gelöscht) werden nach unten verschoben unter ihnen. Die Clear-Eigenschaft gilt für Floating- und nicht-Floating-Elemente.

var main = function(){ 
 

 
function getLocation(){ 
 
    $.get('http://ip-api.com/json', function(loc){ 
 
    $('#location').html(loc.city + ", " + loc.region + " " + loc.zip); 
 
    getWeather(loc.lat, loc.lon); 
 
    }); 
 
} 
 

 
    
 
function getWeather(lat,lon){ 
 
    var url = 'http://api.openweathermap.org/data/2.5/weather?lat=' + 
 
    lat + '&lon=' + lon + '&units=imperial' + '&type=accurate' + 
 
    '&APPID=ab4b9ad58133c89326de9f6ae59d7b66'; 
 
    
 
    $.get(url, function(weatherInfo){ 
 
    var temp = Math.round(weatherInfo.main.temp), 
 
     tempC = Math.round((temp - 32) * 5/9), 
 
     humidity = weatherInfo.main.humidity, 
 
     wind = weatherInfo.wind.speed, 
 
     icon = 'http://openweathermap.org/img/w/' + weatherInfo.weather[0].icon +'.png'; 
 
     
 
    $('#temp').html(temp + '&deg;<span>F</span>'); 
 
    $('#humidity').html('Humidity: ' + humidity + '%'); 
 
    $('#wind').html('Wind Speed: ' + wind + 'mph'); 
 
    $('#icon').attr('src', icon); 
 
    $('#temp').click(function(){ 
 
     if ($('#temp').text().indexOf('F') !== -1) 
 
     $('#temp').html(tempC + '&deg;<span>C</span>'); 
 
     else 
 
     $('#temp').html(temp + '&deg;<span>F</span>'); 
 
    }) 
 
    }); 
 
} 
 

 
getLocation(); 
 
} 
 
$(document).ready(main);

html{ 
 
background:url('http://g01.a.alicdn.com/kf/HTB14WXBJVXXXXaSXFXXq6xXFXXXQ/Hot-Selling-Vinyl-4x5ft-Backdrop-Sunshine-Sea-Flowers-Photography-New-Portrait-Digital-Wedding-Backgrounds-1-25.jpg_640x640.jpg'); 
 
    background-repeat:no-repeat; 
 
    background-size:cover; 
 
} 
 
body{position:relative;} 
 
html, body{ 
 
    height:100%; 
 
} 
 
header{ 
 
    text-align:center; 
 
    font-size:2em; 
 
    letter-spacing:9px; 
 
    font-family:'Raleway', sans-serif; 
 
} 
 
h1{ 
 
    opacity:0.45; 
 
} 
 
#content-box{ 
 
    position:relative; 
 
    text-align:center; 
 
    width:33%; 
 
    margin:auto; 
 
    height:350px;; 
 
    background-color:rgba(0,0,0,0.1); 
 
    border-radius: 35px; 
 
} 
 
#weather{ 
 
    font-size:3em; 
 
} 
 
#temp{ 
 
    position:relative; 
 
    bottom:50px; 
 
    float:left; 
 
    font-size:3em; 
 
    font-family:Arial; 
 
    padding-left:20px; 
 
    color:#329555; 
 
} 
 
#temp:hover{ 
 
    opacity:.8; 
 
    cursor:pointer; 
 
} 
 
span{ 
 
    font-family:'Raleway', sans-serif; 
 
} 
 
.other{ 
 
    font-size:.5em; 
 
    width:auto; 
 
    text-align:right; 
 
    padding: 10px 20px 0px 0px; 
 
    font-family:sans-serif; 
 
} 
 

 
#location{ 
 
    position:absolute; 
 
    bottom:0px; 
 
    width:100%; 
 
    font-size:1.7em; 
 
    letter-spacing: 8px; 
 
    font-family:'Raleway'; 
 
} 
 
#icon{ 
 
    position:relative; 
 
    padding-top:10px; 
 
    display:flex; 
 
    float:right; 
 
    bottom:40px; 
 
    width:175px; 
 
} 
 
footer{ 
 
    position:relative; 
 
    margin-top:50px; 
 
    clear:both; 
 
} 
 
footer .fix{ 
 
    text-align: center; 
 
    
 
}

<html> 
 
    <head> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 
 
    <link href='https://fonts.googleapis.com/css?family=Raleway:300' rel='stylesheet' type='text/css'> 
 
    </head> 
 
    <body> 
 
    <header> 
 
     <h1>Local Weather App</h1> 
 
    </header> 
 
    <div id='content-box'> 
 
     <div id='weather'> 
 
     <p id='temp'></p> 
 
     <p id='humidity' class='other'></p> 
 
     <p id='wind' class='other'></p> 
 
     <img id='icon' src=''> 
 
     </div> 
 
     <p id='location'></p> 
 
    </div> 
 
    
 
    <footer><div class="fix">Code By Michael Ryan</div></footer> 
 
    </body> 
 
    
 
</html>