Проблемы с форматированием CSS - PullRequest
Новая
       19

Проблемы с форматированием CSS

0 голосов
/ 04 апреля 2019

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

Я попытался добавить поля / отступы к изображениям, надеясь, что, если они столкнутся, кто-нибудь уйдет с дороги.Это не сработало.Для текста никакое количество выравнивания текста, ширины или отступов ничего не сделает.Кстати, у .pod div есть дополнительный отступ, поэтому его размер равен .bot

html 


<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>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;
}

.title{
  display:block;
  text-align:center;
  padding-left:15rem;
  padding-right:15rem;
}

.team{
  text-align:center;
  font-size:7rem;
  padding-top:0;
  margin-top:0;
  width:100%;
}

.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;
}
<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 --> 
```
Relevant CSS
```

Я думал, что отступы и поля на .pod и .bot не позволят им объединиться в 1 на маленьких страницах, но они все же это делают.Я также подумал, что, установив ширину .team на 100% и выровняв текст по центру, текст будет отображаться в центре страницы, но вместо этого он будет под .pod.Кроме того, на очень маленьких / тонких страницах текст «тестирование» идет поверх картинок, чего я не хочу.Есть идеи как это исправить?

...