什么是CSS + HTML中这种文本排列最干净的实现？

Question

我试图在CSS中发现一种实现这种文本排列（包括两个大括号）的简洁方法，但我很好奇是否已经有了这样做的最佳实践。三个div是实现这个目标的唯一方法吗？

Answer 1

有几种方法可以实现文本排列，您可以将此文本写在<p>标记中，如下所示：

<p>
  line 1 <br/>
  line 2 <br/>
  line 3 <br/>
  line 4 <br/>
  line 5 <br/>
</p>

或者你可以把它写成一个像这样的列表：

<ul>
  <li>line 1</li>
  <li>line 2</li>
  <li>line 3</li>
  <li>line 4</li>
  <li>line 5</li>
</ul>

如果您决定使用列表HTML，则可能需要声明以下CSS：

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

Here是指向工作小提琴的链接。

上述两种方法都是很好的做法，在一天结束时，您需要采用哪种方法。

更新了答案

Here是一个更新的小提琴来实现你想要的，最好的方法是有4个div，这里是HTML：

<div class="block">
  <div class="block__bg-1"></div>
  <div class="block__module">
    <h2>List</h2>
    <ul>
      <li>line 1</li>
      <li>line 2</li>
      <li>line 3</li>
      <li>line 4</li>
      <li>line 5</li>
    </ul>
  </div>
  <div class="block__bg-2"></div>
</div>

这么多div的原因是因为block__module--bg div持有花括号的背景图像，而block和block__module div用于使用{垂直对齐内容{1}} display: table和display:table-cell方法。

这是CSS：

vertical-align:middle

Answer 2

这是我最终实现它的方式，虽然我仍然接受其他建议：

CSS：

.center {
    display: table-cell;
    vertical-align: middle;
    font-size: 18px;
    margin:0 0 0.5em 0;
    font-weight:200;
    line-height:1.6em;
}

.brackets {
    display: table-cell;
    vertical-align: middle;
    font-size: 144px; !important
    position: absolute; !important
    left: 300px; !important
}

HTML：

<div style="display: table-cell; vertical-align: middle; position:relative;">
    <div class="brackets" style="display: table-cell">{</div>
    <div class="center" style="text-align: center" style="display: table-cell">
        line1<br>
        line2<br>
        line3<br>
        line4<br>
        line5
    </div>
    <div class="brackets" style="display: table-cell">}</div>
</div>