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

Question

Мне нужно, чтобы текст был по центру между"@" символами. Когда текст длинный, он заключен в несколько строк, поэтому мне нужно каждая строка должна быть центрирована.

Вот мой код (и JSFiddle )

.divider {
  border-bottom: 2px solid #fdb239;
  margin-left: 10%;
  margin-right: 10%;
}

.topic {
  display: flex;
  font-family: Tahoma, Geneva, sans-serif;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  font-size: calc(0.8em + 2.3vw);
}

.topic_symbols {
  color: #ee290b;
}

.topic_text {
  width: 60%;
  color: #3cae3f;
  margin: 1% 3vw 1% 3vw;
}

<div class="divider"></div>
<div class="topic">
  <div class="topic_symbols">@</div>
  <div class="topic_text">THIS IS THE SAMPLE TEXT WHICH IS LONG</div>
  <div class="topic_symbols">@</div>
</div>
<div class="divider"></div>

Answer 1

text-align: center; на .topic_text, кажется, добивается цели.

.divider {
  border-bottom: 2px solid #fdb239;
  margin-left: 10%;
  margin-right: 10%;
}

.topic {
  display: flex;
  font-family: Tahoma, Geneva, sans-serif;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  font-size: calc(0.8em + 2.3vw);
}

.topic_symbols {
  color: #ee290b;
}

.topic_text {
  width: 60%;
  color: #3cae3f;
  margin: 1% 3vw 1% 3vw;
  text-align: center;
}

<div class="divider"></div>
<div class="topic">
  <div class="topic_symbols">@</div>
  <div class="topic_text">THIS IS THE SAMPLE TEXT WHICH IS LONG</div>
  <div class="topic_symbols">@</div>
</div>
<div class="divider"></div>

Answer 2

Я смог заставить ваш текст занимать одну строку между символами, сделав три изменения / дополнения в ваш класс topic.

Это были:

.topic {
  display: grid; // Changed to grid rather than flexbox
/* This allows us to set a column width of min-content for the symbols and let the text grow.*/
  grid-template-columns: min-content 1fr min-content; 
// Set white-space to nowrap to ensure text only spans on one line.
  white-space: nowrap;
// ...rest of .topic styles
}

Надеюсь, это поможет! Удачи :)