Кавычки для дизайна

Question

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

body { 
 
    background-color: rgb(44, 62, 80); 
 
} 
 
.quoteMachine { 
 
    margin: 100px auto 0 auto; 
 
    padding: 40px 60px; 
 
    max-width: 600px; 
 
    min-height: 225px; 
 
    border-radius: 5px; 
 
    background-color: white; 
 
} 
 
.theQuote { 
 
    text-align: center; 
 
    font-size: 30px; 
 
    color: rgb(44, 62, 80); 
 
} 
 
.quotetationMarks { 
 
    font-size: 60px; 
 
    font-weight: 600; 
 
} 
 
.quoteAuthor { 
 
    text-align: right; 
 
    font-size: 20px; 
 
    color: rgb(44, 62, 80); 
 
} 
 
.twitterButton {}

<div class="quoteMachine"> 
 
    <div class="theQuote"> 
 
    <blockquote><span class="quotetationMarks">&ldquo;</span > They call me Mister Tiibs <span class="quotetationMarks">&rdquo;<span></blockquote> 
 
     </div> 
 
     <div class="quoteAuthor"> 
 
     - hello 
 
     </div> 
 
     <button class="twitterButton"></button> 
 
     <button class="newQuoteButton"></button> 
 
     
 
     
 
    </div>

Answer 1

Поскольку span s являются встроенные элементы, можно добавить vertical-align: middle; к .quotetationMarks и что бы переместить их вниз к середине остальной части строки.

В качестве альтернативы вы можете добавить position: relative; top: 10px;, если вам нужно более точное управление.

Answer 2

Возможно, добавьте vertical-align: sub; в .quotetationMarks, что вы ищете?

Вы также можете использовать fontawesome, это всегда хороший вариант. ->http://fontawesome.io/icon/quote-right/

Answer 3

Редактировать: В то время как vertical-align: middle; очень действуют и элегантный подход, иногда у вас есть очень конкретная позиция в виде для кавычки. Если вам необходимо сопоставить макет с точностью до пикселя, этот подход предоставляет вам гибкость.

---

Вы можете получить некоторые пробег от использования псевдо-элементов для визуализации котировок, и относительное/абсолютное позиционирование, чтобы получить их «просто так».

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

От MDN:

Так же, как псевдо-классы, псевдо-элементы добавляются селекторы но вместо описания специального состояния они позволяют вам стилизовать определенные части документа. Например, псевдо-элемент :: first-line нацелен только на первую строку элемента, заданного селектором.

И специально для ::before pseudo element:

:: перед тем создает псевдо-элемент, который является первым дочерним элементом элемента сопрягать. Он часто используется для добавления косметического контента к элементу с использованием свойства контента. По умолчанию этот элемент встроен.

Эти цитаты вы стилистика косметическим содержание, поэтому я думаю, что это отличный вариант использования для элемента ::before псевдо.

Я раздвоенный ваш codepen здесь: http://codepen.io/cam5/pen/kkxpbX, но вот соответствующие части

<!-- quote HTML --> 
<blockquote> 
    <span class="quotationMark quotationMark--left"></span > 
     They call me&hellip;<br /> Mister Tiibs 
    <span class="quotationMark quotationMark--right"></span > 
</blockquote> 

и CSS:

/* quote css */ 
.quotationMark { 
    position: relative; 
} 

.quotationMark--left::before, 
.quotationMark--right::before { 
    font-size: 60px; 
    font-weight: 600; 
    position: absolute; 
    top: -15px; 
} 

.quotationMark--left::before { 
    content:"\201C"; 
    left: -45px; 

} 
.quotationMark--right::before { 
    content:"\201D"; 
    right: -45px; 
} 

Этот CSS Tricks ресурс является большим, когда вы пытаетесь найдите ISO для установки определенного символа в правило CSS content: https://css-tricks.com/snippets/html/glyphs/

Установка родительского элемента, .quotationMark к display: relative; будет означать, что top, right, left значения, передаваемые детям (псевдо-элементы) от него, несущих position: absolute; свойств рассчитывается относительной для их родителей.