如何设置a标签内文本垂直居中

Question

源码：http://runjs.cn/code/w2rmnox0
演示 http://runjs.cn/detail/w2rmnox0
全屏：http://sandbox.runjs.cn/show/...

问题： 需求 一个div作为外部container，内部左边有一个img，这个img的高度决定着container的高度，然后在这个div的内部的右边是一个导航栏，导航栏使用div实现，内部包含ol 然后是li（一行显示所有li）然后是a标签，

container的右部导航div 的高度取决于ol的高度，ol的高度取决于所有li标签的高度和，那么如何设置a标签中的文本在container中垂直居中显示？？烦各位指点，

期望显示如下图：

Answer 1

flex可以，但是看你要兼容到什么情况，最简单的方法，给imgDiv和nav加上vertical-align: middle就行了

Answer 2

给container加上

dislay:flex;
align-items: center;
justify-content: space-between;

Answer 3

可以使用flex.css,做了个小实例，可根据自己需求加以修改

//html
<div class="container">
  <div class="imgdiv">logol img</div>
  <div class="right">
    <div class="nav">
      <ol>
        <li><a>导航</a></li>
        <li><a>daohang2</a></li>
        <li><a>daohang3</a></li>
      </ol>
    </div>
  </div>        
</div>
//css
*{
    margin: 0px;
    padding:0px;
    text-decoration: none;
    list-style: none;
}
.container{
    margin-top: 10px;
  display:flex;
  flex-direction:row;
}
.imgdiv {
    display: inline-block;
    height: 300px;
    width: 200px;
    outline:  1px solid green
}
.right{
    display: flex;
   flex-direction:column;
   justify-content:center;
    align-items:flex-end;
    margin-right:10px;
    height: 300px;
    width: 500px;
    outline:  1px solid green
}
.nav{
  margin-left: 100px;
    display: inline-block;

}
ol{
}
li{
    outline: 1px solid blue;
    display: inline-block;
    font-size: 18px;
    height: 25px;
    line-height: 25px;
}

Answer 4

给a表单display：block,然后设置高度、行高（也等于高度），这样子不行吗?