1

所以我也是一个CSS的菜鸟，我对如何使我的标志居中感到困惑。它适用于我的页脚，但不适用于我的文字/徽标。

另外，如何修复页脚左侧的那个小点，我已经将 .footer 宽度设置为 100%。

谢谢！

截屏：

截屏

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Konvoy</title>
<link href='http://fonts.googleapis.com/css?family=Lato:300,400' rel='stylesheet'     type='text/css'>
<!-- <link rel='stylesheet' href="/css/normalize.css"> -->
<link rel="stylesheet" href="/css/bootstrap-responsive.min.css">
<link rel="stylesheet" href="/css/index.css">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4/leaflet.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<div class="container">
 <header> <!--<div id="logo">--> <h1><img src="/assets/Konvoy Logo.png" width="350"/> <!--</div>--> </h1>
<div class="description" style="margin-top: 0px;">See each other in any situation. Geolocation App For Everyone.</div>
</header>
<div class="content">

</div>


<!-- <div class="app">
<div id="infobox" class="infobox"></div> -->


<!-- <div id="map">To get this app to work you need to share your geolocation.</div> 
</div> -->
</div> 
<div class="footer" style="padding-top: 30px;"><center> 2013 All Rights Reserved. Team Konvoy </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="/js/lib/leaflet.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="/js/application.js"></script>
</body>
</html>

CSS：

html, body {
   height: 100%;
   background: url('../assets/landing_page_bg.jpg') no-repeat center center fixed; 
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   color: #666;
   @font: 14px/18px 'Bariol', Arial, sans-serif;
 }

.container{

}

header {
  text-align: center;
  position: center;
  width: 100%;
  padding-top: 150px;

} 

.description {
   font-weight: 300;
   font: 24px 'Bariol', Arial, sans-serif;
   color: #006794;
   text-align: center; 
}

.content {

}

.footer {
  clear: both;
  position: fixed;
  height: 80px;
  width: 100%;
  background-color: #039686;
  font: 16px 'Helvetica', Arial, sans-serif;
  color: #FFFFFF;
  font-weight: 100;
}
4

5 回答 5

2

用这个，

HTML

<h1 id="logo"><img src="/assets/Konvoy Logo.png" width="350"/>

CSS

h1#logo {
    width:350px;
    margin:10px auto;
}
于 2013-06-13T07:54:07.470 回答
1

尝试这个：

<img src="/assets/Konvoy Logo.png" width="350" style="position:absolute;left:50%;top:100px;margin-left:-175px;"/>

此外，将 CSS 重置表添加到您的页面将有助于解决许多问题，例如默认页边距。

http://www.cssreset.com/

于 2013-06-13T07:54:08.890 回答
0

尝试这个

html, body {
   height: 100%;
   background: url('../assets/landing_page_bg.jpg') no-repeat center center fixed; 
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   color: #666;
   @font: 14px/18px 'Bariol', Arial, sans-serif;
   margin:0;
   padding:0;
 }
.footer {
  clear: both;
  position: fixed;
  height: 80px;
  width: 100%;
  background-color: #039686;
  font: 16px 'Helvetica', Arial, sans-serif;
  color: #FFFFFF;
  font-weight: 100;
  bottom:0;
}
于 2013-06-13T07:57:20.730 回答
0

有几种方法可以使 css 中的元素居中。

  1. 如果元素的宽度已知，我们可以使用margin: auto;

  2. 如果需要使用绝对或固定定位并且元素的宽度已知，那么我们可以像这样将其居中：

    .logo {
width: 350;
position: absolute;
left: 50%;
margin: 0 0 0 -175px; // width/2
}

  3. text-align: center;在父容器上使用。在这种情况下 - 确保父容器及其子容器处于正常流程中（未浮动且未定位）。并且子元素需要是inlineor inline-block。

编辑： 还有一件事：在您的header标签中，您首先打开 a div，然后打开一个h1标签，但关闭顺序不正确。您需要关闭第h1一个，然后才关闭div;)

于 2013-06-13T08:13:45.667 回答
0

这可以帮助您将页脚保留在页面底部。

.footer { 
   position:absolute;
   bottom:0;
   width:100%;
}

参考： 如何将页脚保留在页面底部

演示

于 2013-06-13T08:06:40.593 回答