Мой текст по центру перемещается на следующую строку, когда я увеличиваю размер шрифта и расстояние между буквами - PullRequest
Новая
       57

Мой текст по центру перемещается на следующую строку, когда я увеличиваю размер шрифта и расстояние между буквами

1 голос
/ 10 апреля 2020

Я хочу, чтобы мой текст центрировался по центру веб-страницы, и это происходит до тех пор, пока я не увеличу размер и расстояние между буквами до того, что я хочу. Когда я делаю это, второе слово перемещается на следующую строку, хотя у меня есть отступ 0, и там достаточно места. Пожалуйста помоги. Вот css для моего текста: 

.centered {
    font-family: Seravek;
    font-size: 500%;
    color: white;
    letter-spacing: .16em;
    position: absolute;
    top: 42%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Ответы [ 2 ]

0 голосов
/ 10 апреля 2020

Вы можете использовать CSS flexbox вместе с text-align: center;

html,
body {
  height: 100%;
}

body {
  background: black;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.centered {
  font-family: courier;
  font-size: 500%;
  color: white;
  letter-spacing: .16em;
}
<div class="centered">CENTERED TEXT</div>
0 голосов
/ 10 апреля 2020

Это может помочь вам центрировать ваш текст, я использовал здесь font-size: 500%;, что я нахожу это очень много, но вы можете сделать его меньше, и все будет хорошо с центрированием вашего текста. 

* {
margin: 0;
padding: 0;
}

main {
  position: relative;
  background: white;
  height: 200px;
  width: 60%;
  margin: 0 auto;
  padding: 20px;
  resize: both;
  overflow: auto;
}

main div {
  background: black;
  color: white;
  width: 50%;
  transform: translate(-50%, -50%);
  letter-spacing: .18em;
  font-size: 500%;
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 20px;
  resize: both;
  overflow: auto;
}
<main>
  
  <div>
    Center me - Center me -Center me - Center me - Center me - Center me -Center me - Center me - Center me - Center me - Center me - Center me -Center me - Center me
  </div>
  
</main>
...