2012-08-04 60 views
0

我做了这个:jsfiddle Demo如何将链接放置在宽度和高度的中心?

我也行:

<div id="footer"> <h1><a class="link" href="http://www.centerwow.com">mysite</a></h1> </div>

我怎样才能居中链接mysite的div footer的中心。宽度和高度应该在约(菜单)下。 我试图把位置绝对和相对,并以某种方式我摧毁了别的东西。 感谢您的任何帮助。

我的代码:

body { 
    background: #CC3366 url(images/temp.png) center 130px no-repeat ; 
    overflow:hidden; 
    font-family: Arial; 
    font-size: 30px; 
    line-height: 32px; 
    } 
#container { 
    width: 1000px; 
    overflow: hidden; 
    position: relative; 
    height: 450px; 
    margin: 0 auto; 
} 

#all_pages { 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 3000px; 
    } 
.page { 
    width: 1000px; 
    height: 400px; 
    float: left; 
    text-align: center; 
    margin-top: 50px; 
    }  
.page img { 
    margin-top: 50px; 
    } 
#menu { 
    background: #000; 
    } 
#menu ul { 
    list-style: none; 
    width: 457px; 
    height: 35px; 
    margin:auto; 
    } 
#menu ul li { 
    float: left; 
    color: #888; 
    width: 150px; 
    line-height: 35px; 
    text-align: center; 
    cursor: pointer; 
    } 
.active { 
    color: #fff !important; 
    } 
h1 a { 
    color: #000000; 
    text-decoration: none; 

} 
#footer a{ 
    position:absolute; 
    bottom:80px; 
    margin: 0 auto; 
} 
#footer{ 
    position:relative; 
    background: #CC3366; 
    width:100%; 
    height:1000px; 

}​ 

<h1><a class="link" style="position:absolute; left:30px; top:30px;" href="http://www.centerwow.com">portfolio</a></h1> 
<div id="container"> 

    <div id="all_pages"> 

     <div class="page"> 
      <h1>Home Page</h1> 
      <img src="images/home.png" width="300"> 
     </div> <!-- page1 --> 
     <div class="page"> 
      <h1>About Us Page</h1> 
      <img src="images/about.png" width="300"> 
     </div> <!-- page2 --> 
     <div class="page"> 
      <h1>Contact Us Page</h1> 
      <img src="images/contact.png" width="300"> 
     </div> <!-- page2 --> 

    </div> <!-- #all_pages --> 

</div> <!-- #container --> 

<div id="menu"> 
<ul> 
    <li id="1" class="link CC3366 active">Home</li> 
    <li id="2" class="link 33FF66">About</li> 
    <li id="3" class="link FFFF33">Contact Us</li> 
</ul> 
</div> <!-- #menu --> 
<div id="footer"> 
    <h1><a class="link" href="http://www.centerwow.com">mysite</a></h1> 
</div> 
​ 
+0

你试过用h1 {text-align:center}吗? – mfirry 2012-08-04 08:47:38

+0

是的,它有助于添加thx'h1 {text-align:center}' – yossi 2012-08-04 08:59:12

回答

1

试试这个:

position :relative 
top:50% ; 
Left:50%; 

作品或没有?

相关问题