Как применить отступы или поля к этому заголовку, отображаемому как ячейка таблицы?

0

Я адаптировал пример для заголовка со строками на стороне (здесь, точнее: здесь). Он работает очень хорошо, но то, что я не могу сделать, это применить некоторые дополнения к любой стороне текста и иметь линии на стороне, чтобы обнять обе стороны контейнера. Кто-нибудь знает как это сделать?

Пока у меня есть следующий HTML:

<h2 class="section-heading">Example</h2>

и CSS:

.section-heading {
  display: table;
  white-space: nowrap;
}

.section-heading:before,
.section-heading:after {
  background: linear-gradient(to bottom, black, black) no-repeat center / 90% 1px;
  content: "";
  display: table-cell;
  width: 50%;
}

(Я положил его на jsfiddle, желательно, я хотел бы сделать это без каких-либо дополнительных элементов)

  • 0
    border-top не может быть выровнен по середине ... лучше использовать фон CSS
  • 0
    @C-Link C-Link, да, я смог сделать это с фоном, только теперь я столкнулся с проблемой, пытаясь применить отступ к тексту. Есть идеи?
Показать ещё 1 комментарий
Теги:
vertical-alignment
html-heading

5 ответов

1
Лучший ответ

Хорошо, я смог сделать это без каких-либо дополнительных <span> или <div>, разделив псевдоэлементы и выравнивая их фоны слева и справа соответственно. Затем я могу настроить прописку по ширине фона, как показано на рисунке (например, имеет 5% отступов с обеих сторон):

.section-heading {
  display: table;
  white-space: nowrap;
}

.section-heading:before {
  background: linear-gradient(to bottom, black, black) no-repeat left center / 95% 1px;
  content: "";
  display: table-cell;
  width: 50%;
}

.section-heading:after {
  background: linear-gradient(to bottom, black, black) no-repeat right center / 95% 1px;
  content: "";
  display: table-cell;
  width: 50%;
}

демо, спасибо всем за помощь!

Поделиться
0

Добавить позицию: relative; top: 0.6em; к вашим псевдо-классам css.

Поделиться
0

здесь мое решение, добавьте <span></span> внутри вашего элемента h2, а затем добавьте отступы /margin в h2 span {}

http://jsfiddle.net/dASCv/7/

Поделиться
0

Как это демо?

Затем просто добавьте border-spacing вашим section-heading

Поделиться
0

Возможно, вам придется иметь внутреннюю оболочку, обрабатывающую прописку так:

HTML:

<h2 class="section-heading"><div class="section-heading-padding">Example</div></h2>

CSS:

.section-heading {
  display: table;
  white-space: nowrap;
}

.section-heading-padding {
  padding: 0 200px;
}

.section-heading:before,
.section-heading:after {
  background: linear-gradient(to bottom, black, black) no-repeat center / 100% 1px;
  content: "";
  display: table-cell;
  width: 50%;
}

Я не думаю, что это идеальный вариант. Надеюсь, кто-то может предоставить вам лучшее решение.

JSFiddle здесь.

EDIT: Я обновил это, чтобы линии обнимали стороны.

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

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню