需要帮助HTML和CSS代码〜

Question

这是我要制作的图片：中间的日记时间轴和图库文字请帮助我们......如何使它居中对齐

#pages ul{
    margin: 0;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    list-style-type: none;
    border:5px solid;
    border-radius:15px;
    width: 700px;
    font-family: 'Open Sans', sans-serif;
    font-size: 20px;
    border-color: white;
}
#pages ul li { 
    display: inline-block;
    margin-left: 45px;
}
#pages ul li a{
    text-decoration: none;
    color: white;
}
.home_icon{
    padding-top: 3.5px;
}

这就是CSS的代码

<div id="pages">
    <ul>
      <li><a href="#"><img class = "home_icon" src="img/home_icon.png"></a></li>
      <li><a href="#">JOURNAL</a></li>
      <li><a href="#">TIMELINE</a></li>
      <li><a href="#">GALLERY</a></li>
      <li><a href="#">CONTACT</a></li>
    </ul>
</div>

我需要解释和代码:)谢谢

Answer 1

在vertical-align:middle;的CSS中使用<li>：

#pages ul li { 
    display: inline-block;
    margin-left: 45px;
    vertical-align:middle;
}

JSFiddle Example