[英]CSS - Having trouble centering div under header using transform
我在解决这个问题时遇到了一些麻烦,所以这次我决定将我的html和css全部包括在内。
我希望日历部分位于标题部分下方的页面中心,标题部分固定在页面顶部。 我希望我的代码具有动态性,因此我正在使用“翻译”将日历居中。
当我使用IE或Edge查看我的代码时,日历设置在标题的前面(水平居中,但不垂直)。
这可能与我在转换中使用定位有关吗?
的HTML
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet2.css"/>
<title></title>
<!--------------------------header--------------------------->
<div id="headerDiv">
<div id="titleDiv">
<p id= "titleText"> Title </p>
</div>
<ul id="navUL">
<li>Home</li>
<li>Browse</li>
<li>Stats</li>
<li>Calculator</li>
<li>Blaster</li>
</ul>
</div>
</head>
<!--------------------------calendar------------------------->
<body>
<div class="calendar">
<div>
<p class="month">December</p>
<table>
<tr>
<th class="cell">Sunday</th>
<th class="cell">Monday</th>
<th class="cell">Tuesday</th>
<th class="cell">Wednesday</th>
<th class="cell">Thursday</th>
<th class="cell">Friday</th>
<th class="cell">Saturday</th>
</tr>
<tr>
<td class="cell">29</td>
<td class="cell">30</td>
<td class="cell">1</td>
<td class="cell">2</td>
<td class="cell">3</td>
<td class="cell">4</td>
<td class="cell">5</td>
</tr>
<tr>
<td class="cell">6</td>
<td class="cell">7</td>
<td class="cell">8</td>
<td class="cell">9</td>
<td class="cell">10</td>
<td class="cell">11</td>
<td class="cell">12</td>
</tr>
<tr>
<td class="cell">13</td>
<td class="cell">14</td>
<td class="cell">15</td>
<td class="cell">16</td>
<td class="cell">17</td>
<td class="cell">18</td>
<td class="cell">19</td>
</tr>
<tr>
<td class="cell">20</td>
<td class="cell">21</td>
<td class="cell">22</td>
<td class="cell">23</td>
<td class="cell">24</td>
<td class="cell">25</td>
<td class="cell">26</td>
</tr>
<tr>
<td class="cell">27</td>
<td class="cell">28</td>
<td class="cell">29</td>
<td class="cell">30</td>
<td class="cell">31</td>
<td class="cell">1</td>
<td class="cell">2</td>
</tr>
</table>
</div>
</body>
</html>
的CSS
/*-------------------header----------------------*/
body{
margin:0px;
}
#headerDiv{
position: fixed;
height:12%;
width:100%;
background-image:url("Gradient.png");
background-repeat:repeat-x;
text-align: center;
}
#titleDiv{
width: auto;
margin: auto 0;
}
#titleText{
color:#ff6600;
font-size:130%;
text-allign:center;
font-family:verdana,san serif;
}
#navUL{
list-style-type:none;
margin: auto 0;
padding:0;
border-top:1 solid;
border-right:1 solid;
border-left:1 solid;
width:100%;
}
#navUL li{
padding: .2em 1em;
color: #fff;
background-color: #036;
display:inline-block;
text-align:center;
}
/*------------------calendar--------------------*/
.calendar{
text-align:center;
float:left;
background-color:#ffeeff;
height:80%;
width:70%;
position:relative;
top:80%;
left:50%;
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.month{
padding-bottom:-20%;
font-size:260%;
text-align:center;
}
table,th,td{
border: 1px solid black;
text-align:center;
}
table{
text-align:center;
margin: 0 auto;
border-collapse: collapse;
width:100%
}
您的标题应该在正文中。 如果要使日历居中,请尝试以下任一方法:
如果不起作用,请尝试绝对定位。 我希望这有帮助 :)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.