中心Christmax日曆

我正在爲我的女朋友做聖誕日曆。我在集中框和標題時遇到了一些問題。標題不居中，框開始向左多於右側。我已經將包裝設置爲邊距自動0.沒有解決我的問題。有什麼建議麼？中心Christmax日曆

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>

來源

2016-11-19 pledgeco

你爲什麼不只是使用一個表？誠然，日曆可能不是一張桌子，嚴格來說，但有人可能會爭辯說，日子（一週內）是列名，那麼你可以指出，嚴格來說日曆是一張桌子。 – junkfoodjunkie

問題是你的包裝是70％，這是比行中的x盒子更寬（檢查元素，你會看到不同的，在右側的空白空間）...所以，你的包裝應該有確切的寬度的期望框中的數字連續....此外，應該日曆響應，例如每行4,3或2個盒子，相對於屏幕寬度？ – sinisake

的包裝實際上是完全在你的榜樣中心。只是70％的區域只能安裝這麼多的箱子，而這些箱子則向左飄浮。

任何額外的房間都在最後一個箱子的右側。

注意盒子兩邊的藍色線條，它們顯示了包裝盒div的開始和結束位置。

你可以讓這些盒子居中而不是浮動左邊或使包裝更大，就像我下面做的那樣。

來源

2016-11-19 20:27:25

您是否看到過您的代碼在不同分辨率下的工作方式？在更大的屏幕上，包裝並沒有居中... – sinisake

@Nevermind我發佈了一個屏幕截圖，展示了我使用開發工具在更大的分辨率上看到的內容，並更新了答案。 –

是的，沒錯。但是，我們需要對OP期望的行爲進行一些解釋。我認爲，也許彎曲可以解決問題... – sinisake

我的方法是使用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>

來源

2016-11-19 20:37:44 Ren

中心Christmax日曆

回答

相關問題