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

Question

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

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

<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

добавлено 09 Январь 2013 в 07:47 автор Homan

Просмотры: 3

источник

nl ja de

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

добавлено 09 Январь 2013 в 07:51, автор cimmanon, источник

3 ответы

Видеокурс по Java для начинающих

Получи видеокурс по Java для начинающих с упражнениями

Видеокурс "Создание приложений для Android"

Получи множество видеоуроков по Android сейчас

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

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

добавлено 09 Январь 2013 в 07:54 автор Thijs Kramer

источник

Это работает. Я didn' t знают, что вы могли использовать position:relative в элементе промежутка, который является действующим. Это имеет смысл. Хотя,

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

добавлено 09 Январь 2013 в 08:48, автор Homan, источник

Мини-курс по Angular и NgRx

16 видео-уроков

автор axel.michel · Answer 1 · 2013-01-09T08:03Z

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

<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

добавлено 09 Январь 2013 в 08:03 автор axel.michel

источник

Этот ответ работает над современными браузерами, но я забыл говорить, что я должен был поддержать IE7 все еще (какой display:table не выступает правильно). THiCE отвечают на работы над ie7, хотя имеет проблемы дополнения, я должен продолжить работать.

добавлено 09 Январь 2013 в 08:46, автор Homan, источник

Это довольно умно. Определенно лучше, чем любые два ответы (включая мой!). Большие +1.

добавлено 09 Январь 2013 в 08:12, автор Chris, источник

@sketchfemme в случаях как это, я всегда предпочитал бы условную таблицу стилей для ie7, таким образом, соединение обоих решений сделает это для меня. Так или иначе HTML THiCE является определенно лучшим.

добавлено 10 Январь 2013 в 05:40, автор axel.michel, источник

автор Chris · Answer 2 · 2013-01-09T07:58Z

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

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

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

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