如何使用CSS将块元素中的内联元素居中？

Question

我尝试将内联元素（例如span）置于固定宽度的块元素中，以便包含的内联元素确定文本在块元素中的布局方式。
像这样：

＆＃13;

＆＃13;

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

＆＃13;

       <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>
    

＆＃13;

＆＃13;

＆＃13;

以下是我正在寻找的内容：

感谢您的帮助。

Answer 1

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

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

Answer 2

如果您将.centered标记与HTML代码的.container div完全对齐，我有一个解决方案。

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>
    

＆＃13;

＆＃13;

＆＃13;

注意：仅当.centered实际上是HTML中的中心元素时才会起作用。

检查Fiddle