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

Question

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

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

    <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 在代码中的其他代码下面可以做到，但事实并非如此。我认为大屏幕上的问题可能是 .bot 和 .pod 的高度不同，但我不知道如何使它们相等，因为它随着页面越来越小而变化。我不知道为什么我的问题出现在小屏幕上（宽度小于 1300 像素）。再次感谢。

Answer 1

将显示设置为 flex 并将 justify.content:center 添加到您要居中的 div 的 CSS 属性。

Answer 2

这可能是因为您在标题中使用了标签， span 标签无法居中，请将其更改为 h1 标签或另一个

Answer 3

我对你的代码做了一些修改，这就是我想出的：

放心使用

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;
  align-content:center;
}


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

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

  .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 class="primary-content">
   <h2>FTC TEAM 4466</h2>
      <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">
          <h2>testing</h2>
          <h2>4466</h2>
          <p><a href="#egg">egg</a></p>
  </div><!-- End  -->

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

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

CSS formatting issues, divs moving each other and divs not centering

html

css

web-deployment

responsive-design