Html 我如何才能使此内容集中？

我已经为此工作了一段时间，出于某种原因，此内容决定移到左侧，并允许较低的内容位于同一层而不是下方。我知道我把它们放在左边了，但如果我把它移走，它们就不会排成一行，这让我发疯，需要有新的眼光来审视它：）

在我返回到以前的wordpress主题之前，我一直都可以很好地显示这些内容。现在的目标是将此内容集中并内联

先谢谢你，菲尔

.city{
保证金：自动；
填充：15px；
宽度：360px；
高度：380px；
文本对齐：居中；
背景色：#7bbc42；
显示：内联块；
浮动：左；
}
.城市2{
显示：内联块；
保证金：自动；
填充：15px；
宽度：360px；
高度：380px；
背景色：#218b99；
文本对齐：居中；
浮动：左；
} 
.城市3{
显示：内联块；
浮动：左；
保证金：自动；
填充：15px；
宽度：360px；
高度：380px；
背景色：#424860；
文本对齐：居中；
}

本周的获奖数字！
头奖1000英镑！
9
17
26
37
44
动画2

每周只需1英镑，您就有机会赢取1000英镑

以下是您应该做的

1） 删除以前CSS中的所有

float:left

和

margin:auto

2） 将您的3个

city

div包装到父div中（例如

）

3） 添加以下CSS

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

---

这将使所有3个框居中，同时保持它们在线。

您可能需要添加一个主容器，然后在其中添加3个城市分区，类似于：

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

本周的获奖数字！
头奖1000英镑！
9
17
26
37
44
动画2

每周只需1英镑，您就有机会赢取1000英镑

如果删除了

float:left

，您说它们不在线是什么意思？因为我很确定这就是为什么你的元素是左对齐的…没关系，我知道了。这个片段把我弄糊涂了。很抱歉，我只是按照你的建议修改了代码，并添加了100%的宽度和max-width命令以使其响应。非常感谢您的帮助@lucasnadalutti感谢您的建议@HSharma，我刚刚在宽度上添加了一个响应元素，一切都很好