CSS-使用转换时无法将div集中在标题下

Question

I have been having some trouble figuring this out so I have decided to include both my html and css in full this time. 我在解决这个问题时遇到了一些麻烦，所以这次我决定将我的html和css全部包括在内。

I want my calendar section to be centered on the page below my header section which is to be fixed at the top of the page. 我希望日历部分位于标题部分下方的页面中心，标题部分固定在页面顶部。 I want my code to be dynamic so I am using translate to center my calendar. 我希望我的代码具有动态性，因此我正在使用“翻译”将日历居中。

When I view my code using IE or Edge the calendar is set in front of my header (centered horizontally but not vertically). 当我使用IE或Edge查看我的代码时，日历设置在标题的前面（水平居中，但不垂直）。

Could this have to do with my using positioning along with transforms? 这可能与我在转换中使用定位有关吗？

HTML 的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 的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%
}

Answer 1

Your header should be in the body. 您的标题应该在正文中。 If you want the calendar centered try either the following: 如果要使日历居中，请尝试以下任一方法：

Include text-align:center in the body or.. 在正文中包括text-align：center或。
Margin:auto in .calender or.. 保证金：.calender或..
TranslateX(-50%) and margin-left: -35% or use pixels for width like 300px and then use margin-left: -150px which centers it. TranslateX（-50％）和margin-left：-35％或使用像素来表示宽度（如300px），然后使用margin-left：-150px将其居中。

If it doesnt work try absolute positioning. 如果不起作用，请尝试绝对定位。 I hope this helps :). 我希望这有帮助：）。

CSS-使用转换时无法将div集中在标题下

问题描述

1 个解决方案

解决方案1
0 已采纳 2015-10-30 04:42:34

CSS-使用转换时无法将div集中在标题下

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-10-30 04:42:34

解决方案1
0 已采纳 2015-10-30 04:42:34