Как центрировать встроенный элемент в элементе блока с помощью CSS?

Question

Я пытаюсь центрировать встроенный элемент (например, span) внутри блочного элемента фиксированной ширины, чтобы содержащийся в нем встроенный элемент определял способ размещения текста в элементе блока.
Вот так:

        .container {
            width: 200px;
            white-space: nowrap;
            overflow: hidden;
        }
        .centered {
            /* PLACE THIS AS THE CENTER (HORIZONTALLY) OF THE CONTAINER DIV */
        }

       <div class='container'>
        Lorem ipsum dolor sit amet, ullum latine vituperatoribus sed ad, ut sit nihil sententiae. Ad minim prodesset eum, mei ei <span class='centered'>dicam</span> facete accusata, sea nonumy postulant ut. No fabellas facilisis mel, iriure constituto constituam vix te. </div>
    

Вот идея того, что я ищу:

Спасибо за помощь.

Answer 1

У меня есть решение, если вы поместите тег .centered точно по центру к .container div HTML-коду.

.container {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  display: flex;
  justify-content: center;
}
.centered {
  font-weight: 600;
  font-style: italic;
  margin: 0px 4px;
  font-size: 1.1em;
}

<div class='container'>
Lorem ipsum dolor sit amet, ullum latine vituperatoribus sed ad, ut sit nihil sententiae. Ad minim prodesset eum <span class='centered'>dicam</span> mei ei facete accusata, sea nonumy postulant ut. No fabellas facilisis mel, iriure constituto constituam vix te. 
</div>
    

Примечание. Это будет работать только в том случае, если .centered фактически является центральным элементом в HTML.

Проверьте Fiddle

Answer 2

.container {
        margin-left: 500px;
        width: 200px;
        white-space: nowrap;
        overflow: scroll;

           }
.centered {
            /* PLACE THIS AS THE CENTER (HORIZONTALLY) OF THE CONTAINER DIV */
          }