フッター要素が他の要素によってオフセットされています

Question

私はこれを何時間も悩ませており、問題が何であるか把握できません。
私は練習のために作成した基本的なローカル天気アプリを持っています。ページの下部にフッターを追加すると、中央から右に自動的にオフセットされます。位置プロパティセットに関係なく、text-align:centerまたはmargin:autoを使用して要素を中央に配置することはできません。

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：1が実際にthe bug in actionを参照することが最も簡単かもしれので

#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; 
} 

私のコードは、をcodepen にもあります。

華氏を摂氏に変換するためのクリックイベントでは、フッターも右に移動します。なぜなら、これもまたなぜ失われたのかです。

Answer 1

あなたはこれを試すことができます。

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

それは私のために働きました。

Answer 2

CODEPENたとえば、私は今でも、テキスト整列をできることです、

footer{ 

    position: relative; 
    clear:both; 

} 

を変更し、体内のすべてのマージンとパディング、

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

---

を削除していた何

フッターセクションにもあります

footer{ 

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

} 

CODEPEN

Answer 3

使用clear: both;

がクリアCSSプロパティは、要素がそれに先行するか、（クリア）下に移動されなければならない フローティング要素の隣にあることができるかどうかを指定するテキスト整列たとえば それらの下に。 clearプロパティは、浮動小数点と浮動小数点の両方の要素に適用されます（ ）。

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>