Layering Images and Text

Question

У меня возникли проблемы с нанесением изображений кругом и линией с фактическим текстом. Моя цель состоит в том, чтобы все элементы выстроились в центре страницы. Должен ли я использовать таблицу для плавания? Какой лучший метод?
Currently looks like this
Goal
HTML

<div id="two"> 
    <img src="line.png" id="line"> 
    <img src="circle.png" id="circle"> 
    <ul> 
     <li> Photography </li> 
     <li> Computer Shortcut </li> 
     <li> Skiiing </li> 
     <li> Podcasts </li> 
     <li> Road Biking </li> 
     <li> Quality </li> 
    </ul> 
</div> 

CSS

#two{ 
    background-color: #D6E6F4; 
    width: 100%; 
    height: auto; 
    display: -webkit-flex; 
    display: flex; 
} 
#circle{ 
    position: relative; 
    top: 0px; 
    width: 20px; 
    height: 20px; 
    justify-content: center; 
} 
#line{ 
    position: relative; 
    top:5px; 
} 

#two ul{ 
    text-align: center; 
    justify-content: center; 
    list-style-type: none; 
} 
#two li{ 
    font-family: AvenirNext-Regular; 
    font-size: 32px; 
    color: #FFFFFF; 
    line-height: 26px; 
    background: #B55252; 
    border-radius: 8px; 
    text-align: center; 
    justify-content: center; 
    padding: 15px; 
} 

Answer 1

запрашивающая два изображения с сервера? Не нужно, если эти графические элементы могут быть достигнуты с использованием CSS (и i.e: :before псевдоэлементов).

#two{ 
 
    background:#D6E6F4; 
 
    padding-bottom:20px; 
 
} 
 
#two ul{ 
 
    font:13px/1.3 sans-serif; 
 
    list-style:none; 
 
    padding:0; 
 
    text-align:center; 
 
    overflow:hidden; 
 
} 
 
#two span{ 
 
    position:relative; 
 
    display:inline-block; 
 
    text-decoration:none; 
 
    padding:5px 10px; 
 
    background:#B25350; 
 
    color:#fff; 
 
    margin-top:20px; 
 
    border-radius:5px; 
 
} 
 
#two li:first-of-type span{ /* THE FIRST "CIRCLE" */ 
 
    border-radius:50%; 
 
    background:#B25350; 
 
    width:26px; 
 
    height:26px; 
 
    padding:0; 
 
} 
 
#two li:first-of-type span:before{ /* THE "VERTICAL JOINING LINE" */ 
 
    content:""; 
 
    background:#B25350; 
 
    position:absolute; 
 
    top:5px; 
 
    height:400px; 
 
    width:5px; 
 
    left:50%; 
 
    margin-left:-3px; 
 
}

<div id="two"> 
 
    <ul> 
 
    <li><span></span></li> 
 
    <li><span>Photography</span> 
 
    <li><span>Computer Shortcut</span> 
 
    <li><span>Skiing</span> 
 
    <li><span>Podcasts</span> 
 
    <li><span>Road Biking</span> 
 
    <li><span>Quality</span> 
 
    </ul> 
 
</div>