Какая самая чистая реализация этого текста в 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> 

Причиной многих дивы заключается в том, что divs block__module--bg удерживают фоновые изображения для фигурных скобок, а block и block__module divs используются для вертикального выравнивания содержимого с использованием display: tabledisplay:table-cell и vertical-align:middle.

Вот 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>