Центр заголовка текста в контейнере на мобильном телефоне - PullRequest
Новая
       11

Центр заголовка текста в контейнере на мобильном телефоне

0 голосов
/ 26 сентября 2018

Текст в этом заголовке центрируется очень хорошо, пока вы не уменьшите ширину страницы, а затем просто переместит текст вправо.

Вы можете проверить это здесь: http://jsfiddle.net/ors2gqey/

.header {
  background-color: #000;
  width: 100%;
  display: block;
  overflow: hidden;
}

.headerImg {
  padding: 200px;
  background-image: url("header.jpg");
  background-position: 50% 100%;
  background-size: cover;
  background-attachment: fixed;
  text-align: center;
}

.header h1 {
  min-width: 140px;
  text-align: center;
  color: white;
  font-size: 4.5em;
}
<header class="header">
  <div class="headerImg">
    <h1>TEST TEXT</h1>
  </div>
</header>

Ответы [ 2 ]

0 голосов
/ 26 сентября 2018

Проблема заключалась в том, что я использовал заполнение со всех сторон.

Решено с использованием только заполнения сверху и снизу: 

.headerImg {
    padding-top: 200px;
    padding-bottom: 200px;
    background-image: url("header.jpg");
    background-position: 50% 100%;
    background-size: cover;
    background-attachment: fixed;
    text-align: center;
}
0 голосов
/ 26 сентября 2018 
@media (max-width: 600px) {
    .headerImg {
        padding: 0;
    } 
}


.header {
  background-color: #000;
  width: 100%;
  display: block;
  overflow: hidden;
}

.headerImg {
  padding: 200px;
  background-image: url("header.jpg");
  background-position: 50% 100%;
  background-size: cover;
  background-attachment: fixed;
  text-align: center;
}

@media (max-width: 600px) {
    .headerImg {
        padding: 0;
     }
}

.header h1 {
  min-width: 140px;
  text-align: center;
  color: white;
  font-size: 4.5em;
}
<header class="header">
  <div class="headerImg">
    <h1>TEST TEXT</h1>
  </div>
</header>
...