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

Question

我有两行项目符号。我们希望保持文本在整个宽度上居中，但将 "Our Vision" 向左移动。在将两个词（我们的愿景）保持在同一行的同时，我们希望将其垂直对齐到绿色条的中间。这是一个响应式设计。这是一张照片：

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

Answer 2

使用display:flex。那里有很多很好的例子。如果你想创建响应式和现代设计，它真的值得学习

css

#statement{
      display: flex;
      align-items: center;
      background-color: #538231c7;
      color:white;
      padding:1em;
      font-size:1.35em;
      text-align: center;
    }
    
#statement div:first-child{
  white-space: nowrap;
  flex-grow: 0.4;
}
#statement div:last-child{
  padding-left: 1em;
}

@media only screen and (max-width: 600px) {
  #statement{
    display: block;
  }
  #statement div:first-child{
    padding-bottom:1em;
  }
}

@media only screen and (min-width: 1200px) {
  #statement {
    font-size: 1.35vw;
  }
}

<div id="statement">
        <div>Our Vision</div>
        <div>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>

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

How to keep main text centered while moving first two words to the left

css

overlay

html-table

flexbox

responsive-design