Question

我想创建一个关闭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

使用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自动;到你的#panel。添加此项会使表格在页面中居中。跨度将占用#panel的整个宽度，因为它是一个表格单元格。

你们还需要改变text-align：right;到文本对齐：居中，以便跨度内的文本居中。

要保持右对齐并将对齐按钮置于中心，请使用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;
}

垂直中心图标元素

2 个答案: