在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個格，這裏是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用於使用display: tabledisplay:table-cell和垂直對齊內容10方法。

這裏是CSS：

.block { 
    display:table; 
    height:400px; 
} 

.block__module { 
    display:table-cell; 
    vertical-align:middle; 
} 

.block__bg-1, 
.block__bg-2 { 
    height:400px; 
    width:50px; 
    background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/6/68/GullBraceLeft.svg/2000px-GullBraceLeft.svg.png") no-repeat center; 
    background-size:contain; 
} 

.block__bg-2 { 
    transform: scaleX(-1); 
} 

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>