html - CSS 格式问题，div 相互移动，div 不居中

Question

基本上我的标题是测试。在大屏幕上，它不居中，而是向右移动。我想让它居中，但我不能让它居中。在较小的屏幕上，它位于图像的右侧并将它们向左推，没有任何内容居中。在所有情况下，我都希望它位于图像下方并位于页面中央。谢谢。

我一直在尝试对齐、 float 、宽度和边距/填充，但没有任何效果。

    <div class="primary-content">
   <span class="title">FTC TEAM 4466</span>
      <a href="#egg">egg</a>


        <div class="bot-pod">
          <div class="bot">
               <img src="img/finalbot.svg" alt="old robot">
            </div>
            <div class="pod">
               <img src="img/finalpod.svg" alt="old robot">
            </div>
         </div>


  <div class="team">
          <span class="title">testing</span>
          <h1>4466</h1>
          <span class="egg">        <p>
      <a href="#egg">egg</a>
    </p></span>
  </div><!-- End  -->

    </div><!-- End .primary-content --> 

body {
  color: #000;
  font: 1em/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;

}

.primary-content{
  text-align:center;
  font-family: 'Abolition Regular', Helvetica, Arial, sans-serif;
  font-size: 15rem;
  padding-top:20px;
    margin-top:0;
  padding-bottom: 50px;
  margin-bottom:0px;
  display:block;
}


.bot {
float:left;
width:47%;
padding:1px 1px 1px 1px; 
margin: 0 1px 0 1px;
}

.pod {
float:right;
width:47%;
padding:1px 1px 1px 1px; 
margin: 90.66px 1px 90.66px 1px;
}

@media only screen and (max-width: 1300px) {
  .bot {
text-align:center;
width:100%;
padding:0; 
margin: 0;
}

.pod {
text-align:center;
width:100%;
padding:0; 
margin: 0;
}
  img[src="img/finalbot.svg"]{
    width:70%;
    align-content:center;
}

img[src="img/finalpod.svg"]{
    width:70%;
    align-content:center;
}
}

我虽然在代码中 div 位于其他 div 之下可以做到这一点，但事实并非如此。我认为大屏幕上的问题可能是 .bot 和 .pod 的高度不同，但我不知道如何使它们相等，因为它随着页面越来越小而变化。我不知道为什么我的问题出现在小屏幕上(宽度小于 1300 像素)。再次感谢。

Answer 1

将显示设置为 flex并添加 justify.content:center div 的 CSS 属性你正试图居中。