分层图像和​​文本

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（即：: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>