Как я могу централизовать текст в div с единицами просмотра?

При использовании пиксельных блоков я могу выровнять текст без проблем. Но с единицами просмотра, я никуда не могу. Вот мой код.Как я могу централизовать текст в div с единицами просмотра?

#aboutMeTitle { 
 
    height: 10vh; 
 
    background-color: #BEA69B; 
 
    display: block; 
 
} 
 
#aboutMeTitle p { 
 
    display: inline-block; 
 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif, "FontAwesome Regular"; 
 
    text-transform: uppercase; 
 
    letter-spacing: 0.2em; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
}

<div class="row" id="aboutMeTitle"> 
 
    <p>About Me</p> 
 
</div>

источник

2016-09-30 Kyle_Figueroa

'Дисплей: встроенный блок;' на пункте может * не * быть то, что вы хотите. – Scott

Very простой с CSS flexbox:

#aboutMeTitle { 
 
    display: flex; 
 
    justify-content: center; /* center p horizontally */ 
 
    align-items: center;  /* center p vertically */ 
 
    height: 10vh; 
 
    background-color: #BEA69B; 
 
} 
 
#aboutMeTitle p { 
 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
 
    text-transform: uppercase; 
 
    letter-spacing: 0.2em; 
 
}

<div class="row" id="aboutMeTitle"> 
 
    <p>About Me</p> 
 
</div>

Поддержка браузера:Flexbox поддерживается всеми основными браузерами, except IE < 10. Некоторые недавние версии браузера, такие как Safari 8 и IE10, требуют vendor prefixes. Чтобы быстро добавить все префиксы, которые вам нужны, используйте Autoprefixer. Подробнее в this answer.

источник

2016-09-30 02:36:16

Это тоже работает. Я применил «line-height: 10vh», и это сделало трюк, но гибкая коробка тоже сделала то же самое. Мне просто интересно, какая техника более широко поддерживается? –

Вы уже используете процентные единицы просмотра. Таким образом, вы можете безопасно использовать flexbox. Оба являются передовыми технологиями CSS3. В терминах которых более широко поддерживается, это будет flexbox (см. Caniuse.com). –

Для вертикального выравнивания: середина работы родителя должен быть установлен на дисплее: Таблица клеток HTML

<div class="row" id="aboutMeTitle"><p>About Me</p></div>

CSS

#aboutMeTitle { 
height: 10vh; 
background-color: #BEA69B; 
display:block; 
display:table-cell; 
} 

#aboutMeTitle p { 
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif, "FontAwesome Regular"; 
text-transform: uppercase; 
letter-spacing: 0.2em; 
vertical-align:middle; 
text-align:center; 
}

источник

2016-09-30 02:27:26

Это исправило свойство text-align обратно в нормальное состояние, поэтому оно имеет горизонтальную ориентацию. Однако я не могу получить его по вертикали. Обычно я просто добавляю высоту строки к тому же значению, что и div, но вы не можете установить высоту строки для единицы просмотра; или если вы можете я не знаю трюк, чтобы сделать это. любое понимание? –

Прошу прощения, я назвал название неправильным. Моя основная проблема заключалась в вертикальном выравнивании, а не в горизонтальном выравнивании текста. –

Вы только что удалили display: inline-block в #aboutMeTitle p и добавили line-height: 10vh;, чтобы сделать центр текста вертикальным.

HTML код:

<div class="row" id="aboutMeTitle"><p>About Me</p></div>

CSS код:

#aboutMeTitle { 
    height: 10vh; 
    background-color: #BEA69B; 
    display: block; 
} 
#aboutMeTitle p { 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif, "FontAwesome Regular"; 
    text-transform: uppercase; 
    letter-spacing: 0.2em; 
    vertical-align:middle; 
    line-height: 10vh; 
    text-align:center; 
}

JSFIDDLE DEMO

источник

2016-09-30 02:36:17 Eightleven

Я чувствую себя очень глупо, и я прошу прощения за беспокойство, кто с этим. Надеюсь, этот ответ может помочь кому-то еще. Я работал на 4 часа сна, и теперь я работаю над личным проектом. В любом случае, вы можете применить свойство line-height с единицами просмотра, я просто должен был его жестко закодировать, потому что это не опция на панели DW CSS.

Вот Фиксированный CSS

#aboutMeTitle { 
    height: 10vh; 
    background-color: #BEA69B; 
    display: block; 
} 
#aboutMeTitle p { 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif, "FontAwesome Regular"; 
    text-transform: uppercase; 
    letter-spacing: 0.2em; 
    vertical-align: middle; 
    text-align: center; 
    line-height: 10vh; 
}

источник

2016-09-30 02:38:24

Как я могу централизовать текст в div с единицами просмотра?

ответ

Смежные вопросы