css - 如何在将前两个单词向左移动时保持正文居中

Question

我有两行元素符号。我们希望保持文本在整个宽度上居中，但将“我们的愿景”移到左侧。在将两个词(我们的愿景)保持在同一行的同时，我们希望将其垂直对齐到绿色条的中间。这是一个响应式设计。这是一张照片:

#vision-table{
  display:table;
  margin:1.3509375vw 0;
  border:solid .5px black; 
  width:100%;
  text-align:center;
}
#vision{
  background-color:#538231c7;
  color:white;
  height:3.71385vw;
  padding:1.00215vw 2.01vw;
  line-height:1.5;
  font-size:1.35vw;
  display:table-cell;
  vertical-align:middle;
}

<div id="vision-table">
   <div id="vision">Our Vision: A sustainable and healthy town of                         Weston, with engaged citizens committed<br>
                    to a thriving community, today and in the future.    </div>
</div>

Answer 1

使用绝对位置？

#vision-table{
  display:table;
  margin:1.3509375vw 0;
  border:solid .5px black; 
  width:100%;
  text-align:center;
}
#vision{
  background-color:#538231c7;
  color:white;
  height:3.71385vw;
  padding:1.00215vw 2.01vw;
  line-height:1.5;
  font-size:1.35vw;
  display:table-cell;
  vertical-align:middle;
  position: relative;
}
.vision-left {
  position: absolute;
  left: 10vw;
   top: 50%;
  margin-top: -1.26vw;
}

<div id="vision-table">
<div id="vision"><span class="vision-left">Our Vision:</span> A sustainable and healthy town of                         Weston, with engaged citizens committed<br>
                    to a thriving community, today and in the future.    </div>
</div>