javascript - CSS 垂直对齐部分标签中的文本？

Question

我发布了一个我在做什么的例子

.open-text {
  color: pink;
  /*border: 1px solid red;*/
  /* display: flex !important; */
  /* align-items: center !important; */
  background: #1e3a87;
  font-family: 'Open Sans Condensed', sans-serif;
  /*justify-content: center;*/
}

<section>
  <h1 class="open-text">
    <br/>
    Lorem Ipsum: usage. Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text.your life.
  </h1>
</section>

如何将文本置于中心并使其成为宽度不占满整个页面的居中列？

Answer 1

您对 display: flex 的尝试有效，只需删除 <br/> (我还添加了一个 height，所以我们可以看到它居中):

  .open-text {
        color: pink;
        display: flex;
        align-items: center;
        background: #1e3a87;
        font-family: 'Open Sans Condensed', sans-serif;
        height:200px;
    }

  <section>
    	<h1 class="open-text">
    Lorem Ipsum: usage. Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text.your life.
    	</h1>
    </section>