html - 我怎样才能让这个内容居中？

Question

我已经为此工作了一段时间，出于某种原因，此内容已决定向左移动，并允许较低的内容位于同一级别而不是下方。我知道我让它们向左浮动，但如果我删除它，它们就不会内嵌，这让我抓狂，需要新鲜的眼光来看待它 :)

在我返回到之前的 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>

Answer 1

这是你应该做的。

1) 删除所有float: left和 margin: auto在你之前的 CSS 中

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

3) 添加以下CSS

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

这应该使所有 3 个框居中，同时保持它们内嵌。