我想将我的div设为中心,这样无论你在网站上观看的屏幕有多大,它都完全集中在页面的中间位置。
请帮助 谢谢!
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="java.js"></script>
<head>
<link rel="stylesheet" href="css/style.css" type="text/css"/>
<title>Test Website</title>
<meta name="" content="">
</head>
<body onload="Slider();">
<header>
<div id="title">
<h1 class="headertext">Test Website</h1>
</div>
<div id="menubar">
<ul>
<li><a href="#content">slideshow</a></li>
<li><a href="#naturepictures">naturepictures</a></li>
<li><a href="#hello">homepage</a></li>
<li><a href="#hello">homepage</a></li>
<li><a href="#hello">contact</a></li>
</ul>
</div>
</header>
<div class="hide"></div>
<div id="rightmenu">
<ul>
<li><a href="#content">slideshow</a></li>
<li><a href="#naturepictures">naturepictures</a></li>
<li><a href="#hello">homepage</a></li>
<li><a href="#hello">homepage</a></li>
<li><a href="#hello">contact</a></li>
<div id="youtubelogo">
<a href="http://www.youtube.com" target="_blank">
<img src="images/youtubelogo.gif" alt="" width="90" height="50" align="middle">
</a>
</div>
</ul>
<div id="righttriangle1"></div>
<div id="righttriangle2"></div>
<div id="righttriangle3"></div>
<div id="righttriangle4"></div>
<div id="righttriangle5"></div>
</div>
<div id="leftmenu">
<ul>
<li><a href="#content">slideshow</a></li>
<li><a href="#naturepictures">naturepictures</a></li>
<li><a href="#hello">homepage</a></li>
<li><a href="#hello">homepage</a></li>
<li><a href="#hello">contact</a></li>
</ul>
<div id="lefttriangle"></div>
</div>
<div id="content">
<h1 style="font-weight: normal;">Contentpage</h1><br>
Picture slideshow
<br>
<br>
<div class="slider">
<img id="1" src="images/car1.jpg" border="0" alt="car1"/>
<img id="2" src="images/car2.jpg" border="0" alt="car2"/>
<img id="3" src="images/car3.jpg" border="0" alt="car3"/>
<img id="4" src="images/car4.jpg" border="0" alt="car4"/>
<img id="5" src="images/car5.jpg" border="0" alt="car5"/>
</div><!--slider end-->
<div class="shadowbottom"></div>
<div id="naturepictures">
<h1 style="font-weight: normal;">Pictures</h1>
<br>
<img style="width: 800px; height: 600px;" src="images/nature1.gif"/>
</div><!--naturepictures end-->
</div><!--content end-->
</body>
</html>
CSS:
*{
margin: 0 auto 0 auto;
text-align: left;
color: #ffffff;
}
body{
margin: 0;
text-align: left;
font-size: 13px;
font-family: arial, helvetica, sens-serif;
color: #ffffff;
width: 1200px;
height: auto;
background: #fdf7e3;
}
header {
position: fixed;
width: 100%;
top: 0;
background: rgba(0,0,0,0.8);
z-index: 10;
}
h1{
color: black;
text-align: center;
}
.hide
{
position: fixed;
width: 100%;
top: 0;
background: rgba(255,255,255,1);
z-index:5;
height: 123px;
}
.headertext{
margin-top: 15px;
text-align: center;
color: white;
}
#title{
font-size: 20px;
margin: -10px 0 30px 0;
width: 100%;
height: 70px;
border-top: 2px solid #000000;
border-bottom: 2px solid #000000;
}
#menubar{
float: left;
clear: both;
width: 100%;
height: 30px;
list-style: none;
border-bottom: 2px solid #010000;
}
#menubar ul{
list-style: none;
margin-top: -20px;
text-align: center;
}
#menubar ul li{
list-style: none;
display: inline;
padding-right: 80px;
}
#menubar ul li a{
color: #ffffff;
text-decoration: none;
font-size: 20px;
font-weight: bold;
}
#menubar ul li a:hover{
border-bottom: 2px solid #ffffff;
}
#rightmenu{
margin-top: -20px;
position: fixed;
right: 0;
width: 160px;
height: 530px;
list-style: none;
background: rgba(0,0,0,0.8);
color: #ffffff;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
#rightmenu ul{
margin-top: 23px;
}
#rightmenu ul li{
display: block;
padding-bottom: 50px;
}
#rightmenu ul li a{
font-weight: bold;
text-decoration: none;
color: #ffffff;
font-size: 15px;
text-align: center;
margin-left: -15px;
}
#rightmenu ul li a:hover{
border-bottom: 2px solid #ffffff;
transition: opacity .5s ease-in;
opacity: 1;
}
#righttriangle1 {
width: 0;
height: 0;
border-right: 25px solid rgba(0,0,0,0.8);
border-top: 34px solid transparent;
border-bottom: 34px solid transparent;
margin-top: -410px;
margin-right: 160px;
}
#righttriangle2 {
width: 0;
height: 0;
border-right: 25px solid rgba(0,0,0,0.8);
border-top: 34px solid transparent;
border-bottom: 34px solid transparent;
margin-right: 160px;
}
#righttriangle3 {
width: 0;
height: 0;
border-right: 25px solid rgba(0,0,0,0.8);
border-top: 34px solid transparent;
border-bottom: 34px solid transparent;
margin-right: 160px;
}
#righttriangle4 {
width: 0;
height: 0;
border-right: 25px solid rgba(0,0,0,0.8);
border-top: 34px solid transparent;
border-bottom: 34px solid transparent;
margin-right: 160px;
}
#righttriangle5 {
width: 0;
height: 0;
border-right: 25px solid rgba(0,0,0,0.8);
border-top: 34px solid transparent;
border-bottom: 34px solid transparent;
margin-right: 160px;
}
#leftmenu{
position: fixed;
left: 0;
margin-top: -20px;
width: 160px;
height: 450px;
list-style: none;
background: rgba(0,0,0,0.8);
color: #ffffff;
border-left: 2px solid #010000;
border-right: 2px solid #010000;
}
#leftmenu ul{
margin-top: 23px;
}
#leftmenu ul li{
display: block;
padding-bottom: 50px;
}
#leftmenu ul li a{
font-weight: bold;
text-decoration: none;
color: #ffffff;
font-size: 15px;
margin-left: -15px;
}
#leftmenu ul li a:hover{
border-bottom: 2px solid #ffffff;
transition: opacity .5s ease-in;
opacity: 1;
}
#lefttriangle{
margin-top: 89px;
margin-left: -1px;
width: 0px;
height: 0;
border-top: 80px solid rgba(0,0,0,0.8);
border-left: 82px solid transparent;
border-right: 82px solid transparent;
}
#content{
width: 1000px;
margin: 0 auto;
margin-top: 135px;
color: #000000;
font-weight: bold;
text-align: center;
font-size: 15px;
}
#naturepictures{
color: black;
top: 1200px;
width: 80px;
height: 300px;
text-align: center;
margin-left: 440px;
}
.naturepicture{
height: 400px;
width: 600px;
}
.slider{
margin-top: 20px;
width: 600px;
height: 400px;
overflow: hidden;
margin: auto;
border-radius: 10px;
vertical-align: middle;
}
.shadowbottom{
background-image:url(../images/shadow.png);
background-repeat: no-repeat;
background-position: top;
width: 850px;
height: 144px;
vertical-align: middle;
margin-top: -50px;
}
.slider img{
width: 600px;
height: 400px;
display: none;
}
我已经尝试了很多东西,但不明白为什么它会很奇怪 谢谢你的帮助
答案 0 :(得分:0)
试试这个
#div_id {
width: 50%;
margin: 0 auto;
}
答案 1 :(得分:0)
你可以试试这个:
<div class="mainwrapper" >
<div class="innerwrapper">
<div class="contentdiv">test</div>
</div>
</div>
您将在上面的JSFiddle链接中找到工作示例...
新年快乐......:)