将div设置为文本以从位于中心的另一个div开始

Question

我有一些位于容器中心的文本，并且我想让其他一些文本从位于中心的文本开始（这些div的长度不同，所以这是问题）。尝试通过添加jquery来获得X位置，但是没有成功，而且我不知道如何仅使用CSS解决它。

这是我的代码：

 <div class="graphic-icons-page">
    <div class="container icons-container">
    <div class="icons-software-title-left">Wide</div>
      <div class="icons-software-title-center text-center"><span>Text in center</span></div>
    </div>
  </div>

.icons-container{
  height:80vh;
  background-color: black;
  color:white;
 
  
  
}
.graphic-icons-page{  
  display: flex;
  justify-content: center;
  align-items: center}

  ///test 

.icons-software-title-center{
  width: 100%;
}
.icons-software-title-left{ font-size: 50px;}
.icons-software-title-center{
  font-size:50px
}

这就是我想要的样子：

Answer 1

我添加了一个div，并将图标容器移动到另一个容器中。这行得通吗？

在这个小提琴中，我添加了引导CSS以测试https://jsfiddle.net/1aywg3Lm/

body {

   background-color: black;

}
.container-center {
  text-align: center;
}
.icons-container{
  height:80vh;
  background-color: black;
  color:white;
  display: inline-block;
  text-align: left;
}
.graphic-icons-page{  
  display: flex;
  justify-content: center;
  align-items: center}

  ///test 

.icons-software-title-center{
  width: 100%;
}
.icons-software-title-left{ font-size: 20px;}
.icons-software-title-center{
  font-size:20px
}

<div class="graphic-icons-page">
    <div class="container">
      <div class="icons-container">
        <div class="icons-software-title-left">Wide</div>
        <div class="icons-software-title-center text-center"><span>Text in center of the page</span></div>
      </div>
    </div>
  </div>

Answer 2

我使用width:max-content

解决了我的问题

.container-center {
  text-align: center;
  width: 100%;
  background-color: black;
}
.icons-container{
  height:80vh;
  background-color: black;
  color:white;
  display: inline-block;
  text-align: left;
  width: max-content;


}