Question

我已经在这方面工作了一段时间，由于某种原因，这个内容决定向左移动并允许较低的内容位于同一级别而不是下方。我知道我让它们漂浮在左边，但是如果我把它移除它们就不会坐在里面而且它让我疯了，新鲜的眼睛需要看它：）

我让这些显示正常，直到我回到之前的wordpress主题。现在的目标是让这些内容集中并内联。

提前谢谢，菲尔

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

这是你应该做的。

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

2）将3个city div包装成父div（例如<div class="cities-wrapper">）

3）添加以下CSS

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

这应该使所有3个盒子居中，同时保持它们内联。

Answer 2

很可能你需要添加一个主容器，然后添加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>

如何将此内容集中在一起？

2 个答案: