Вопросы выравнивания линии линии CSS

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

.quote { 
 
    font-size: 18pt; 
 
    padding-top: 50px; 
 
    padding-bottom: 15px; 
 
    text-align: center; 
 
    line-height: 0.25; 
 
} 
 

 
.speech_mark_large { 
 
    color: #203D69; 
 
    font-size: 120px; 
 
    vertical-align: top; 
 
}

<div class="quote"> 
 
    <span class="speech_mark_large">&ldquo;</span> Leading the way with innovative design of corrugated Point of Sale displays and packaging offering bespoke design to fulfill your brief. 
 
    <span class="speech_mark_large">&rdquo;</span> 
 
</div>

Также на JSFiddle.

Я хочу, чтобы две линии цитаты были ближе друг к другу, но когда я применяю высоту линии, чтобы решить эту проблему, она помещает речевые метки в предыдущую строку. Как я могу это решить?

источник

2012-04-08 RSM

Проводка JSFiddle велика, но, пожалуйста, также разместить код здесь, так что в случае JSFiddle когда-либо уходит, этот вопрос все еще полезно на свой. –

Вы должны установить line-height на полный элемент .quote. Затем вы устанавливаете vertical-align в top для внутреннего элемента .speech_mark_large. Изменяя line-height элемента .quote, вы можете настроить межстрочный интервал на то, что, по вашему мнению, выглядит лучше всего.

EDIT: Я добавил top и position в .speech_mark_large, чтобы вы могли изменить вертикальное положение кавычек.

CSS

.quote { 
    font-size:18pt; 
    padding-top:15px; 
    padding-bottom:15px; 
    text-align: center; 
    line-height: 30px; 
} 
.speech_mark_large { 
    color:#203D69; 
    font-size:50pt; 
    vertical-align: top; 
    top: 5px; 
    position: relative; 
}

Смотрите этот обновленный JSFiddle

источник

2012-04-08 15:57:44

не работает, если вы идете ниже строки-высоты: 40 пикселей; так что не реально возможное решение – RSM

Я обновил свой ответ (и JSFiddle), чтобы позволить высоту строк меньше 40 пикселей –

попробовать это:

.speech_mark_large { 
color:#203D69; 
font-size:50pt; 
line-height: 35px; 
vertical-align:text-top; 
}

высота строка заставит их занимают меньше мест из рядных высот текста (который, в свою очередь, делает их плавать над вашим другим текстом). Выравнивание по вертикали зафиксирует это, указав кавычки, чтобы они соответствовали нижней части текста, а не обычно.

источник

2012-04-08 15:25:55 Rodik

Вопросы выравнивания линии линии CSS

ответ

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