我一直在爲此工作了一段時間,出於某種原因,此內容已決定移動到左側,並允許較低的內容坐在同一級別而不是底部。我知道我有他們向左漂浮,但如果我刪除它們,他們不會坐在內線,這是驅使我堅果,新鮮的眼睛需要看看它:)如何獲得此內容爲中心?
我有這些顯示罰款,直到我回到以前wordpress主題。現在的目標是讓這個內容集中和內聯。
在此先感謝,菲爾
.city {
margin: auto;
padding: 15px;
width: 360px;
height: 380px;
text-align: center;
background-color: #7bbc42;
display:inline-block;
float:left;
}
.city2 {
display:inline-block;
margin: auto;
padding: 15px;
width: 360px;
height: 380px;
background-color: #218b99;
text-align: center;
float:left;
}
.city3 {
display:inline-block;
float:left;
margin: auto;
padding: 15px;
width: 360px;
height: 380px;
background-color: #424860;
text-align: center;
}
<div class="city">
<h1 style="position: relative;color: #ffffff;font-size:35px;text-align: center;width: 100%;font-family: foco;margin-top: -5px;"><b>This Week's Winning Numbers!</h1>
<h1 style="position: relative;color: #00000;font-size:40px;text-align: center;width: 100%;font-family: foco;"><b>First Prize £1000!</h1>
<div class="winning number" style="padding-left: 16px;padding-top: 16px;z-index:8;width: 40px;font-size: 35px;position: absolute;text-align: center;color: black;font-family: foco;"><b>9<b></div>
<div class="winning number"style="padding-left: 85px;padding-top: 16px;z-index:8;width: 40px;font-size: 35px;position: absolute;text-align: center;color: black;font-family: foco;"><b>17</div>
<div class="winning number"style="padding-left: 160px;padding-top: 16px;z-index:8;width: 40px;font-size: 35px;position: absolute;text-align: center;color: black;font-family: foco;"><b>26</div>
<div class="winning number"style="padding-left: 232px;padding-top: 16px;z-index:8;width: 40px;font-size: 35px;position: absolute;text-align: center;color: black;font-family: foco;"><b>37</div>
<div class="winning number"style="padding-left: 307px;padding-top: 16px;z-index:8;width: 40px;font-size: 35px;position: absolute;text-align: center;color: black;font-family: foco;"><b>44</div>
<img src="http://ashgatelottery.org.uk/wp-content/uploads/2016/09/Lotto-balls-5.gif" alt="lottery ball"style="left: 420px;top: 180px;z-index: 3;width: 100%; max-width: 380px;margin: auto;">
<a href="https://secure.edirectdebit.com/Ashgate-Hospice/lottery/Desktop-Form-Page/">
<img src="http://ashgatelottery.org.uk/wp-content/uploads/2016/09/Play-today-logo.gif" alt="play" style="width:300px;height:110:%;border:0;margin-left: 2px;margin-top: 0px;position: relative;z-index: 7;"></a>
</div>
<div class="city2">
<h2>Animation 2</h2>
<img src="http://ashgatelottery.org.uk/wp-content/uploads/2016/11/Postcode-map-winners.jpg" alt="map" style="width:350px;margin:auto;float: center;position: relative;z-index: 12;margin-top: -26px;">
</div>
<div class="city3">
<p style="font-size: 35px;font-family: foco;color: white;text-align:center;position:relative;z-index:9;margin-top:20px;">Will you be our next rollover winner?</p>
<p style="top-margin:200px;font-size: 24px;font-family: foco;text-align:center;position:relative;z-index:20;color:white;">For as little as £1 per week you will be giving yourself the opportunity to win £1,000!</p>
<a href="http://www.ashgatelottery.org.uk/index.php/are-you-a-winner/"style="color: #FFFFFF;">
<img src="http://ashgatelottery.org.uk/wp-content/uploads/2016/09/This-weeks-winnners-list.png"style="width: 100%;max-width: 280px;margin: auto;float: center;position: relative;margin-right:15px;margin-top:0px;"></a>
</div>
你是什麼意思你的時候說如果你刪除'float:left',他們不會內聯?因爲我很確定這就是爲什麼你的元素是左對齊的... – lucasnadalutti
沒關係,我明白了。片段讓我困惑。 – lucasnadalutti
對此感到抱歉,我毫無疑問地按照您的建議修改了代碼並將寬度增加了100%,並使用最大寬度命令使其響應。非常感謝您的幫助@lucasnadalutti – philbass44