CSS + HTMLでこのテキストアレンジの最もクリーンな実装は何ですか？

Question

私はCSSでこのテキスト配列（2つの中括弧を含む）を実装するきれいな方法を発見しようとしていますが、それを行うためのベストプラクティスが既にあるかどうか不思議です。これを達成するには3つの部門だけが唯一の方法ですか？

Answer 1

いくつかの方法を使用すると、テキストの配置を実現することができ、あなたはどちらかそうのような<p>タグで、このテキストを書くことができますがあります。

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

それとも、のようなリストとしてそれを書くことができますそう：あなたがリストのHTMLを使用する場合は、以下のCSSを宣言する

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

必要があります。

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

Hereは、動作中のフィドルへのリンクです。

上記の方法はどちらも良い習慣であり、1日の終わりには、それはあなた次第であり、どちらの方法を選ぶかはあなた次第です。

更新回答

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が垂直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>