中心Christmax日历

Question

我正为我的女朋友制作圣诞日历。我有一些关于框和标题居中的问题。标题不在中心位置，方框比左侧开始更多。我已将包装器设置为margin auto 0.Dennt解决了我的问题。有什么建议吗？

＆＃13;

＆＃13;

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;

}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我的方法是使用flexbox：

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

包装器实际上完全集中在您的示例中。只是70％的区域只能容纳这么多盒子，而那些盒子则向左漂浮。

任何额外的房间都在最后一个适合的方框的右边。

注意框两边的蓝线，显示包装div开始和结束的位置。

你可以让这些盒子居中而不是向左浮动，或者像下面那样使包装器更大。