2016-11-14 103 views
2

我一直在爲此工作了一段時間,出於某種原因,此內容已決定移動到左側,並允許較低的內容坐在同一級別而不是底部。我知道我有他們向左漂浮,但如果我刪除它們,他們不會坐在內線,這是驅使我堅果,新鮮的眼睛需要看看它:)如何獲得此內容爲中心?

我有這些顯示罰款,直到我回到以前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>

+0

你是什麼意思你的時候說如果你刪除'float:left',他們不會內聯?因爲我很確定這就是爲什麼你的元素是左對齊的... – lucasnadalutti

+0

沒關係,我明白了。片段讓我困惑。 – lucasnadalutti

+0

對此感到抱歉,我毫無疑問地按照您的建議修改了代碼並將寬度增加了100%,並使用最大寬度命令使其響應。非常感謝您的幫助@lucasnadalutti – philbass44

回答

0

這裏是你應該做的。

1)刪除所有float: leftmargin: auto在以前的CSS

2)包裝你3周city的div到父DIV(如<div class="cities-wrapper">

3)添加以下CSS

.cities-wrapper { 
    width: 1000px; // Replace with desired width 
    margin: auto; 
} 

這應該居中所有3個盒子,同時保持內聯。

0

那麼可能是你將需要添加一個主容器中,然後在它的3個市的div,像這樣:

.container{width:100%; text-align:center;} 

      .city { 

    float:left; 
    padding: 15px; 
    width: 360px; 
    height: 380px; 
    text-align: center; 
    background-color: #7bbc42; 
    display:inline-block; 
} 

.city2 { 

    display: inline-block; 
    margin:0 auto; 

    padding: 15px; 
    width: 360px; 
    height: 380px; 
    background-color: #218b99; 
    text-align: center; 

} 

    .city3 { 

    float:right; 
    display:inline-block; 

    margin: auto; 
    padding: 15px; 
    width: 360px; 
    height: 380px; 
    background-color: #424860; 
    text-align: center; 
} 

和HTML是:

<div class="container"> 
      <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> 
</div> 
+0

感謝@HSharma的建議,我只是在寬度上添加了一個響應元素, – philbass44