CSS-使用轉換時無法將div集中在標題下

Question

我在解決這個問題時遇到了一些麻煩，所以這次我決定將我的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%
}

Answer 1

您的標題應該在正文中。 如果要使日歷居中，請嘗試以下任一方法：

在正文中包括text-align：center或。
保證金：.calender或..
TranslateX（-50％）和margin-left：-35％或使用像素來表示寬度（如300px），然后使用margin-left：-150px將其居中。

如果不起作用，請嘗試絕對定位。 我希望這有幫助：）。

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