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 个答案: