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

preahkumpii спросил: 28 апреля 2018 в 08:40 в: html

Я пытаюсь центрировать встроенный элемент (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>
    

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

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


2 ответа

Swapna Suradkar ответил: 28 апреля 2018 в 09:50
.container {
        margin-left: 500px;
        width: 200px;
        white-space: nowrap;
        overflow: scroll;           }
.centered {
            /* PLACE THIS AS THE CENTER (HORIZONTALLY) OF THE CONTAINER DIV */
          }
Luca ответил: 28 апреля 2018 в 10:51
Хотя этот фрагмент кода может решить проблему, он не объясняет, почему и как он отвечает на вопрос. Пожалуйста, включите объяснение для своего кода, так как это действительно помогает улучшить качество вашего сообщения. Помните, что вы отвечаете на вопрос читателей в будущем, и эти люди могут не знать причин вашего предложения кода. Флагеры / рецензенты: Для ответов только на код, таких как этот, downvote, не удалять!
Syam Pillai ответил: 28 апреля 2018 в 11:08

У меня есть решение, если вы помещаете тег .centered точно в центр кода .container 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.

Проверьте скрипт