javascript - 垂直居中图标元素

Question

我有这个JSFiddle

我想创建一个将关闭 div 的“X”按钮。不过，我似乎无法将其垂直居中。该按钮实际上是一个带有 fa fa-times 类 font-awesome 的跨度.

我不想让任何东西水平居中。我想将 div 中的 X 垂直居中。

HTML

<div id="panel">
<span class="fa fa-times"></span>   
</div>

CSS

#panel {
    display:table;
    width:500px;
    background-color:yellow;
    height:40px;
    text-align:right;
}
span {
    display:table-cell;
    padding:4px;
    background-color:green;
    vertical-align:middle;
    margin-right:10px;
}

JS(没关系因为这是一个CSS问题)

$(document).ready(function () {
    $('span').click(function () {
        $('#panel').hide();
    });
});

Answer 1

通过在 #panel 上使用 display: table-cell 和 vertical-align: middle 调整您的 CSS。然后，您的内联 span 将根据需要垂直居中。

#panel {
  display: table-cell;
  width: 500px;
  background-color: yellow;
  height: 80px; /* tall height for emphasis */
  text-align: left;
  vertical-align: middle;
  padding-left: 10px; /* optional */
}
span {
  padding: 4px;
  background-color: green;
  margin-right: 10px;
  float: right;
}

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<div id="panel">
  Some caption to go with the icon.
  <span class="fa fa-times"></span> 
</div>