Блог

В принципе, у меня есть название, в котором говорится «тестирование». На больших экранах он не центрируется, а перемещается вправо. Я хочу, чтобы он был центрирован, но я не могу его центрировать. На экранах меньшего размера он находится справа от изображений и сдвигает их влево, ничего не удерживая по центру. Во всех случаях я хочу, чтобы это было под изображениями и по центру страницы. Спасибо.

Я продолжаю пробовать выравнивание, плавающие значения, ширину и поля / отступы, но ничего не работает.

     <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 пикселей).
Еще раз спасибо.

установите display на flex и добавьте justify.content:center в свойства CSS того, div что вы пытаетесь центрировать.

это может произойти из-за того, что вы используете тег в заголовке, теги span не могут быть центрированы, измените это на тег h1 или другой

Я внес некоторые изменения в ваш код, и вот что я придумал:

Не стесняйтесь использовать это

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