Как мне отцентрировать мой текст в теге div I и почему в нем есть пробел между словами an и чрезвычайно?

Question

Как центрировать мой текст .peachtext и теги абзаца .whitetext внутри элемента .headertext1?Пожалуйста помоги!Я довольно новичок в кодировании.Я также хотел бы увеличить размер .peachtext до 30px и .whitetext примерно до 20px, но это создает пробел между словами an и чрезвычайно.Кажется, что мое свойство text-align не работает.

header{
    width: 100%;
    height: 1229px;
}
div.headerblue{
    width: 100%;
    height: 505px;
    background-color: #323841; 
}
div.headerwhite{
    width: 100%;
    height: 594px;
    background-color: #ffffff;
}
div.headerorange{
    width: 100%;
    height: 130px;
    background-color: #f25c43; 
}
 div.headertext1 {
 width: 940px;
 margin: auto;
 padding-top: 30px;
     
}
p.peachtext {
 color: #f25c43;
 font-size: 20px;
 text-align: center;
    
}
p.whitetext {
    color:white;
    font-size: 10px;
    text-align: center;
}

<header>
                 <div class="headerblue"> 
                     <div class="headertext1">
                        <p class="peachtext">WE PROVIDE AN EXTREMELY</p>
                         <p class="whitetext">LOW PRICE</p>
                     </div>
                 </div>
                 <div class="headerwhite"></div>
                 <div class="headerorange"></div>  
            </header>

Answer 1

Выполните фрагмент кода в Firefox, и места размещения точно такие, как вы хотите, чтобы оба абзаца находились в центре div.Просто увеличьте размер шрифта, чтобы получить желаемые размеры.Вы уверены, что ваш CSS-файл правильно связан?

Answer 2

header{
    width: 100%;
    height: 1229px;
}
div.headerblue{
    width: 100%;
    height: 505px;
    background-color: #323841;
}
div.headerwhite{
    width: 100%;
    height: 594px;
    background-color: #ffffff;
}
div.headerorange{
    width: 100%;
    height: 130px;
    background-color: #f25c43; 
}
 div.headertext1 {
 width: 100%;
 margin: auto;
 padding-top: 30px;
     
}
p.peachtext {
 color: #f25c43;
 font-size: 30px;
 text-align: center;
    
}
p.whitetext {
    color:white;
    font-size: 20px;
    text-align: center;
}

<header>
                 <div class="headerblue"> 
                     <div class="headertext1">
                        <p class="peachtext">WE PROVIDE AN EXTREMELY</p>
                         <p class="whitetext">LOW PRICE</p>
                     </div>
                 </div>
                 <div class="headerwhite"></div>
                 <div class="headerorange"></div>  
            </header>

Проверьте вышеуказанный код.

Answer 3

, если вы хотите центрировать .peachtext и .whitetext внутри вашего div.headertext1

, вам следует установить ширину .headertext1 от 940 пикселей до 100%

 div.headertext1 {
   width: 100%; //set this to 100%
   margin: auto;
   padding-top: 30px;
}

или вы измените ширину на max-width, если хотите оставить 940px

 div.headertext1 {
       max-width: 940px; //set this to max-width
       margin: auto;
       padding-top: 30px;
    }

и если вы хотите настроить размер шрифта вашего текста, вы можете использовать "VW" вместо "PX", какэто

p.peachtext {
  color: #f25c43;
  font-size: 4vw;
  text-align: center;

}
p.whitetext {
  color:white;
  font-size: 2vw;
  text-align: center;
}