HTML

Question

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

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

谢谢！

截图：

screenshot

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

Answer 1

使用此，

HTML

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

CSS

h1#logo {
    width:350px;
    margin:10px auto;
}

Answer 2

试试这个：

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

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

http://www.cssreset.com/

Answer 3

试试这个

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

Answer 4

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

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

参考： How to keep footers at the bottom of the page

Demo

Answer 5

有几种方法可以将元素置于css中。

如果元素的宽度已知，我们可以使用margin: auto;
如果需要使用绝对定位或固定定位并且元素的宽度已知，那么我们可以将其置于中心位置：
```
.logo {
width: 350;
position: absolute;
left: 50%;
margin: 0 0 0 -175px; // width/2
}
```
< / LI>
在父容器上使用text-align: center;。在这种情况下 - 确保父容器及其子容器处于正常流程中（未浮动且未定位）。子元素必须为inline或inline-block。

修改还有一件事：在header标记中，您首先打开div，然后打开h1标记，但结算顺序不正确。您需要先关闭h1，然后再关闭div;）

CSS集中资产的问题

5 个答案:

HTML

CSS