"Wow! </div> <div class="source"> -- John S. </div> Стили: .quote {text-align:center} .source"> "Wow! </div> <div class="source"> -- John S. </div> Стили: .quote {text-align:center} .source"> "Wow! </div> <div class="source"> -- John S. </div> Стили: .quote {text-align:center} .source" />

как делают правильно, я выравниваю некоторый текст к другому тексту, который сосредоточен

Я хочу иметь потребительскую цитату свидетельства, сосредоточенную посреди страницы. Цитата могла бы быть произвольной длиной, но не охватывает две линии. Тогда я хочу новую строку и затем имя человека, который обеспечил свидетельство, только под свидетельством, но выровненный по правому краю.

<div class="quote">
 "Wow!  Thanks, create customer service."
</div>
<div class="source">
  -- John S. - California
</div> 

Стили:

.quote {text-align:center}
.source {text-align:right; padding-right:300px;}

Как я выравниваю источник так, чтобы я работал на произвольную длину кавычек?

0
nl ja de
Это похоже на блок цитирования содержание that' s повышенный с отделением. Кроме того, цитируют , признак существует.
добавлено автор cimmanon, источник

3 ответы

Измените свое повышение немного и вложите источник в цитату.

<div class="quote">
    "Wow!  Thanks, create customer service."
    <div class="source">
         -- John S. - California
    </div> 
</div>

CSS для него:

.quote { 
  display:table;
  text-align: center;
  margin:0 auto;
}

.quote .source {
  text-align:right;
}

Вот скрипка для него.

1
добавлено
Этот ответ работает над современными браузерами, но я забыл говорить, что я должен был поддержать IE7 все еще (какой display:table не выступает правильно). THiCE отвечают на работы над ie7, хотя имеет проблемы дополнения, я должен продолжить работать.
добавлено автор Homan, источник
Это довольно умно. Определенно лучше, чем любые два ответы (включая мой!). Большие +1.
добавлено автор Chris, источник
@sketchfemme в случаях как это, я всегда предпочитал бы условную таблицу стилей для ie7, таким образом, соединение обоих решений сделает это для меня. Так или иначе HTML THiCE является определенно лучшим.
добавлено автор axel.michel, источник

Это сделает, вероятно:

HTML:

"Wow! Thanks, create customer service." -- John S. - California

CSS:

blockquote {
    text-align: center;
}
.quote {
    position: relative;
}
cite {
     position: absolute;
     right: 0;
     bottom: -25px;
     text-align: right;
}
1
добавлено
Это работает. Я didn' t знают, что вы могли использовать position:relative в элементе промежутка, который является действующим. Это имеет смысл. Хотя,

помечают isn' t необходимый он?

добавлено автор Homan, источник

В основном: вы не можете, не идя слишком ужасный и взламывать-y с вашим повышением. (См. ответ THiCE для такого решения).

Я делаю не , рекомендуют это, но если вы хорошо с использованием JavaScript, тогда это довольно просто: (ниже использования jQuery, но может быть достигнут без него),

$(".quote").each(function() {
    var $this = $(this);
    $this.next().css({"padding-right": ($this.parent().width() - $this.width())/2});
});

Если вы не хотите использовать JavaScript и не хотите идти хакерское-проникновение-y, я предлагаю, чтобы вы заново продумали свое расположение просто немного.

0
добавлено
@THiCE Ваш улучшенный ответ хорош:) Это все еще - hacky хотя; абсолютное расположение обычно.. гм, хорошо это просто чувствует себя неправильным. Я делаю НЕ , рекомендуют использовать JavaScript для расположения; я просто представлял другую методику, если OP настаивает на расположении в памяти.
добавлено автор Chris, источник
@THiCE Да.:), Хотя я должен сказать, третий ответ выглядит многообещающим - остерегаются, использование показ: стол; ! Хотя я думаю, что то же самое могло быть достигнуто, используя показ: действующий блок; (с крошечной модификацией).
добавлено автор Chris, источник
That' s не ужасный! I' ve улучшил мой ответ:), Если you' d нравится идти hacky или ужасный, использовать JavaScript в целях расположения....
добавлено автор Thijs Kramer, источник
Я думаю, что абсолютное расположение - способ держать полный контроль над положением элементов, не неправильно используя их. I' m не большой поклонник показ: ячейка таблицы , чтобы достигнуть определенных пожеланий расположения, вы не большой поклонник абсолютного расположения:)
добавлено автор Thijs Kramer, источник
Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

CSS — русскоговорящее сообщество
CSS — русскоговорящее сообщество
1 502 участник(ов)

Сообщество любителей CSS Возникли проблемы с CSS? – пиши сюда, обсудим и предложим самое лучшее решение Работа: @css_ru_jobs Правила: https://teletype.in/@css_ru/r1EWtQ2w7 Приходите в наши чаты @javascript_ru и @frontend_ru Флуд: @css_flood

Чат — Типичный Верстальщик
Чат — Типичный Верстальщик
1 080 участник(ов)

Основной канал: @tpverstak Обратная связь: @annblok Все ссылки на соц.сети проекта: http://taplink.cc/tpverstak ПРАВИЛА ЧАТА — https://teletype.in/@annblok/BygPgC3E7

Веб-Технологи: UI/UX, Вёрстка, Фронтенд
Веб-Технологи: UI/UX, Вёрстка, Фронтенд
167 участник(ов)

Всё про веб-дизайн и вёрстку. А также: HTML, CSS, флекс и бутстрапы, шаблонизаторы, препроцессоры, методологии, аглифаеры, улучшаторы и обфускаторы. Обсуждаем темы юзабилити, устраиваем А/В тесты лендингов, и проводим аудит.

DTP :: @DTPublish
DTP :: @DTPublish
147 участник(ов)

Обсуждаемые темы: полиграфия, препресс, верстка, дизайн, иллюстрации, скрипты, плагины. Канал - @DTPublishing

css_jobs
css_jobs
26 участник(ов)

Чат для вопросов по css и html: @css_ru Флуд: @css_flood Канал с вакансиями и резюме: @css_jobs_feed

css_флуд
css_флуд
10 участник(ов)