Как выровнять псевдоэлементы по вертикали?

У меня есть псевдоэлемент до и после для articleSubTitle. Я сталкиваюсь с проблемой, когда у меня есть небольшой контейнер или на мобильных устройствах, где текст из articleSubTitle выпадает на новую строку. Это вызывает падение элемента after сразу после последнего слова (см. Фрагмент).

Я хочу, чтобы articleSubTitle был единым элементом, а элементы до и после всегда помещались в его середину, независимо от того, какой длины он может быть. Я бы опубликовал изображение, но загрузчик не может его загрузить.

Я пробовал делать articleSubTitle, display:block и display:inline-block. Ни одна из этих попыток не помогла.

Кто-нибудь знает, как я могу это сделать?

.container {
  width: 70%;
  background: gray;
}

.articleSubTitle {
  font-family: 'Nunito', sans-serif;
  font-size: 1.3rem;
  color: #4d4d4d;
}

.articleSubTitle:before,
.articleSubTitle:after {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 70px;
  height: 1px;
  background: #2f2f2f;
}

.articleSubTitle:before {
  margin-right: 10px;
}

.articleSubTitle:after {
  margin-left: 10px;
}

<div class = "container">
  <h4 class = "articleSubTitle center">From the company A & the company B</h4>
</div>

html css

07.08.2018 17:25

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

261

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Используйте flexbox:

.articleSubTitle {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.container {
  background: silver;
}

.articleSubTitle {
  font-family: 'Nunito', sans-serif;
  font-size: 1.3rem;
  color: #4d4d4d;
}

.articleSubTitle {
  display: flex;
  justify-content: center;  /* center horizontally */
  align-items: center;      /* center vertically */
  text-align: center;       /* center text inside */
}

.articleSubTitle:before,
.articleSubTitle:after {
  content: '';
  width: 70px;
  height: 1px;
  background: #2f2f2f;
}

.articleSubTitle:before {
  margin-right: 10px;
}

.articleSubTitle:after {
  margin-left: 10px;
}

<div class = "container" style = "max-width: 400px; margin: 0 auto;">
  <h4 class = "articleSubTitle">From the company A &amp; the company B</h4>
</div>

<div class = "container">
  <h4 class = "articleSubTitle">From the company A &amp; the company B</h4>
</div>

07.08.2018 17:30

Решение - сделать элемент контейнером flexbox:

.container {
  width: 70%;
  background: gray;
}

.articleSubTitle {
  font-family: 'Nunito', sans-serif;
  font-size: 1.3rem;
  color: #4d4d4d;
  display: flex; /*added this*/
  align-items:center; /*added this*/
  justify-content:center; /*added this*/
}

.articleSubTitle:before,
.articleSubTitle:after {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 70px;
  height: 1px;
  background: #2f2f2f;
}

.articleSubTitle:before {
  margin-right: 10px;
}

.articleSubTitle:after {
  margin-left: 10px;
}

<div class = "container">
  <h4 class = "articleSubTitle center">From the company A & the company B</h4>
</div>

Или используйте отступы и полагайтесь на градиент для создания линий:

.container {
  width: 70%;
  background: gray;
  text-align:center;
}

.articleSubTitle {
  font-family: 'Nunito', sans-serif;
  font-size: 1.3rem;
  color: #4d4d4d;
  padding:0 80px;
  margin:0;
  display:inline-block;
  background:
   linear-gradient(#2f2f2f,#2f2f2f) left center,
   linear-gradient(#2f2f2f,#2f2f2f) right center;
  background-size:70px 1px;
  background-repeat:no-repeat;
}

<div class = "container">
  <h4 class = "articleSubTitle center">From the company A & the company B</h4>
</div>

07.08.2018 17:30

Другие вопросы по теме

Проблема с кнопкой высоты строки на Android?

TextInput в React Native показывает текстовое значение с цветным фоном

Flex - фиксированное положение детей и рост 100%

Переполнение: прокрутка в div, содержащем динамический ul

Прокручиваемое текстовое поле в модальном нижнем колонтитуле Bootstrap-4

Как добавить разделитель к элементам меню разделенной кнопки панели инструментов kendo

Использовать 100% высоты основного контейнера

HTML работает в Fiddle, но не локально

A11y для пустого тега привязки

Получение границы для обтекания всего элемента

Как выровнять псевдоэлементы по вертикали?

Ответы 2

Другие вопросы по теме

Похожие вопросы