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：

#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 上，因此实际上看到the bug in action可能最简单。

在将华氏温度转换为摄氏温度的点击事件中，它也将页脚推向右侧，为此我也迷失了为什么会这样。

Answer 1

CODEPEN示例，

我改变的是，

footer{

  position: relative;
  clear:both;

}

并删除了正文中的所有边距和填充

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

现在，您甚至可以在页脚部分进行文本对齐

footer{

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

}

CODEPEN text-align

的示例

Answer 2

你可以试试这个：

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

它对我有用。

Answer 3

使用clear: both;

clear 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>

页脚元素被其他元素偏移

3 个答案: