图文分层

Question

我有困难的分层图像，圆圈和线与实际的文本。我的目标是让所有的元素排列在页面的中央。我应该用一张桌子浮起来吗？什么是最好的方法？

现在看起来是这样的

目标

<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>

​