html - 中心 Christmax 日历

Question

我正在为我的女朋友制作圣诞日历。我在将框和标题居中时遇到一些问题。标题未居中，框从左侧开始比右侧更多。我已将包装器设置为 margin auto 0。没有解决我的问题。有什么建议吗？

body {
  background: url("http://hamawandi.com/images/bg4.png") no-repeat center center fixed;
  background-size: cover;
  font-size:30;
  margin: 0;
  color: #666;
}

.wrapper {
  width:70%;
  margin:0 auto;
  margin-bottom:10px;
  margin-top:50px;
}

.calender-box {
  width:130px;
  height:130px;
  background-image: url('/images/background-xmas3.png');
 float:left;
  border: 5px dotted red;
  margin-left:10px;
  margin-bottom:10px;
   text-align:center;
  font-size:45px;
  color:white;
  line-height:140px;
  text-decoration: none;

}

.header{
  font-size:40px;
  color:white;
  margin:0 auto;
  margin-top:-10px;

}

<div class="wrapper">
<div class="header">
❄ Julekalender 2016 ❄
</div>
<a href="/luke1.php" class="calender-box">1</a>
<a href="/luke1.php" class="calender-box">2</a>
<a href="/luke1.php" class="calender-box">3</a>
<a href="/luke1.php" class="calender-box">4</a>
<a href="/luke1.php" class="calender-box">5</a>
<a href="/luke1.php" class="calender-box">6</a>
<a href="/luke1.php" class="calender-box">7</a>
<a href="/luke1.php" class="calender-box">8</a>

</div>

Answer 1

我的方法是使用 flexbox :

body {
background: url("http://hamawandi.com/images/bg4.png") no-repeat center center fixed;
background-size: cover;
font-size:30;
margin: 0;
color: #666;
}

.wrapper {
width: 70%;
margin: 0 auto;
margin-bottom: 10px;
margin-top: 50px;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
/* you must add vendor prefixes to flexbox properties for cross-browser compatibility */
}

.header {
font-size: 40px;
color: white;
margin: 0 auto;
margin-top: -10px;
text-align: center;
width: 100%;
}

.calender-box {
width: 130px;
height: 130px;
background-image: url(/images/background-xmas3.png);
float: none;
border: 5px dotted red;
margin-left: 0;
margin-bottom: 10px;
text-align: center;
font-size: 45px;
color: white;
line-height: 140px;
text-decoration: none;
}

a {
width: 130px;
height: auto;
display: inline-block;
border: 5px solid transparent;
}

<div class="wrapper">
<div class="header">❄ Julekalender 2016 ❄</div>
<a href="/luke1.php" class="calender-box">1</a>
<a href="/luke1.php" class="calender-box">2</a>
<a href="/luke1.php" class="calender-box">3</a>
<a href="/luke1.php" class="calender-box">4</a>
<a href="/luke1.php" class="calender-box">5</a>
<a href="/luke1.php" class="calender-box">6</a>
<a href="/luke1.php" class="calender-box">7</a>
<a href="/luke1.php" class="calender-box">8</a>
<a></a>
<a></a>
<a></a>
<a></a>
</div>