Как идеально выровнять текст по центру с кавычками
Свойство выравнивания по центру не учитывает двойные кавычки при выравнивании текста, поэтому выравнивание текста по центру с кавычками выглядит не очень хорошо. Он выключен, потому что кавычки совпадают. Человеческий глаз фокусируется на самом тексте. Поэтому этот текст должен быть выровнен, а кавычки должны быть слева и справа от этого текста.
Текст динамичен по содержанию и размеру. Могу ли я как-нибудь сделать так, чтобы это выглядело хорошо? Он должен работать в Chrome.
Я попробовал использовать селектор CSS hanging-punctuation: first last, но это не решает проблему. Я тоже пробовал text-indent: -3em, но это не решение для центрированного текста.
#container {
width: 400px;
height: 300px;
font-family: Arial;
background: lightblue;
}
#container>div {
margin-top: 40px;
text-align: center;
font-size: 30px;
}
#container>div:first-child {
color: green;
}
#container>div:last-child {
color: red;
}<div id = "container">
<div>
This alignment<br>looks good to the eye
</div>
<div>
"This alignment does<br>not look so good to the eye"
</div>
</div>«Свойство выравнивания по центру не учитывает двойные кавычки при выравнивании текста» Хм… да, учитывает.
Да. Хорошая точка зрения. Выравнивание по центру отключено, поскольку кавычки находятся по выравниванию. Человеческий глаз фокусируется на самом тексте. Поэтому этот текст должен быть выровнен, а кавычки должны быть слева и справа от этого текста.
Вы можете использовать элементы с абсолютным позиционированием для кавычек. Или примените отрицательный запас в 1 символ -> margin-left: -1ch;
@Paulie_D Тогда я имею в виду, что при выравнивании не следует учитывать двойные кавычки. Виноват. Извини.
Ответы 1
Вы можете использовать псевдоэлементы до и после для создания кавычек.
При абсолютном расположении их ширина не будет учитываться при расчетах выравнивания.
#container {
width: 400px;
height: 300px;
font-family: Arial;
background: lightblue;
}
#container>div {
margin-top: 40px;
text-align: center;
font-size: 30px;
}
#container>div:first-child {
color: green;
}
#container>div:last-child {
color: red;
position: relative;
}
#container>div:first-child::before {
content: '"';
position: absolute;
transform: translateX(-100%);
}
#container>div:first-child::after {
content: '"';
position: absolute;
}<div id = "container">
<div>
This alignment<br>looks good to the eye
</div>
<div>
This alignment<br>looks good to the eye
</div>
<div>
"This alignment does<br>not look so good to the eye"
</div>
</div>Большое вам спасибо, вы на самом деле тот, кто понимает мою проблему/вопрос и не голосует против моего вопроса. И у вас есть идеальное решение. Спасибо!!
Можно ли более (любой?) уточнить, что значит «хорошо выглядеть»?