垂直中心图标元素

Question

我有这个JSFiddle

我想要创建一个'X‘按钮，将关闭div。不过，我似乎不能垂直地对着它。该按钮实际上是fa fa-times类字体-太棒了的span。

我不想把任何东西水平地集中起来。我想在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

使用display: table-cell和vertical-align: middle在#panel上调整您的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>

​

Answer 2

添加页边距:0自动；到您的面板#。添加此内容将使表格在页面中居中。跨度将占用#面板的全部宽度，因为它是一个表格单元格。

您还需要更改文本-对齐:右；改为文本-对齐:中心，以便您的跨度内的文本是居中的。

为了保持对齐和对中按钮，请使用span作为按钮的包装器，如下所示：

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

 span {
     display:table-cell;
     padding:4px;
     vertical-align:middle;
      margin-right:10px;
}

button{
  background-color:green;
}