дисплей: встроенный, но на разных строках - PullRequest
Новая
       38

дисплей: встроенный, но на разных строках

1 голос
/ 03 февраля 2012

Встроенные элементы хороши тем, что их ширина равна ширине содержимого и потому что их можно центрировать по правилу CSS: 

text-align: center

Но встроенные элементы остаются на одной линии.Можно ли выровнять их по вертикали?

Скрипка: http://jsfiddle.net/_bop/NhVaF/ Полноэкранная скрипка: http://jsfiddle.net/_bop/NhVaF/show

Пожалуйста, не надо:

  • ИзменитьHTML в примере.Измените CSS!
  • Придумайте другие методы для центрирования элементов, если только у вас нет лучшего решения, которое работает с элементами с неопределенной шириной и не требует тонны контейнеров и / или поплавков.

Заранее спасибо!

Ответы [ 4 ]

3 голосов
/ 03 февраля 2012

В вашей разметке, если диапазон находится в разных строках, вы можете добавить его в родительский контейнер: 

white-space: pre-line;

С этим объявлением CSS ваш диапазон по-прежнему центрирован, и вам не нужно добавлятьHTML-разметка.

pre-line - это значение приведет к тому, что последовательности пробелов будут свернуты в один символ пробела.Разрывы строк будут происходить везде, где необходимо заполнить строчные блоки, и на новых строках в разметке (или при появлении «\ a» в сгенерированном содержимом).Другими словами, это как обычно, за исключением того, что оно учитывает явные разрывы строк.

Вы можете найти больше информации здесь о пробелах:

Для совместимости с IE7 вы также можете добавить в родительский контейнер: 

*white-space: pre /*FixIE7*/;
1 голос
/ 03 февраля 2012

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

http://jsfiddle.net/NhVaF/5/

0 голосов
/ 18 июля 2016

Я тоже поиграл с этим и нашел свое решение, просто поместив <br> после каждого inline-block элемента.Я знаю, что это изменяет html, но ненамного!

Если вы хотите создавать разрывы строк с помощью CSS, попробуйте использовать псевдокласс :after.Будет ли что-то вроде этой работы? 

div.class:after {
  content:"\a";
  white-space: pre;
}

перерыв :after трюк: https://stackoverflow.com/a/10934138/6586407

0 голосов
/ 03 февраля 2012

Если вы хотите, чтобы это работало без изменения HTML, то лучше всего просто плавать: left;ясно: слева;вот так: 

span {
    float: left;
    clear: left;
    color: #FFF;
    padding: 30px;
}

дисплей: блок; не будет работать, потому что для этого потребуется указать ширину (иначе они заполнят доступное пространство).

display: inline-block;будет не работать, потому что все еще отображается в той же строке.

...