html - 通过每个元素的中间垂直对齐两个元素

Question

抱歉，如果标题令人困惑。希望图像不言自明。

如何使用 css 将加号的中间与 x 的横截面对齐？

我知道我可以使用 position 之类的方法将 x 向上移动几个像素，但我正在寻找一种适用于多种不同屏幕尺寸的更一致的解决方案。

这是 HTML。 pretty-link 只是一个 cursor 属性设置为 hand 和 pointer 的类

<span className='pull-right' style={{verticalAlign: 'middle', margin: 'auto', display: 'inline-block'}}>
    <i className='fa fa-minus pretty-link' style={{verticalAlign: 'middle'}} onClick={e => toggleSystemUnit(e, index)}></i>
    <i className='fa fa-times pretty-link' style={{verticalAlign: 'middle'}}></i>
</span>

这里是一个使用 flex 的例子，不工作

http://jsfiddle.net/f1aejwwf/1/

这里是一个使用垂直对齐的例子，不起作用

http://jsfiddle.net/hw4au2km/

在每个示例中，x 都略低于 +

为环绕跨度设置显式宽度并使每个宽度 float :

http://jsfiddle.net/u99q01t2/2/

在每个示例中，x 似乎都略低于 +，所以可能是 fa 的问题？

对于任何来自 Google 的人来说，我认为 fa-times 图标不会轻易以这种方式对齐。以上所有解决方案都适用于 fa-plus 和 fa-minus，但 fa-times 图标略微偏离中心。也许有人可以找到解决方案，但现在我已经为我的元素切换到 Material 图标。

Answer 1

那两个图像在基线上水平对齐，这就是为什么你需要在右边添加一些 margin-bottom 以使它们水平居中，我认为 2px 把工作做好:

.pretty-link {
  cursor: pointer;
  /* display: inline-block; not necessary */
  vertical-align: middle;
}

.containerdiv {
  display: flex; /* displays children inline */
  justify-content: space-between; /* children are evenly distributed, first child is on the far left, last on the far right */
  align-items: center; /* vertical alignment / centering */
  margin: auto;
  width: 70%;
  padding: 5px 20px 5px 10px;
  background-color: #eee;
  border-bottom: 2px solid #ddd;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class='containerdiv'>
  <h4>Detail</h4>
  <span class='pull-right'>
    <i class='fa fa-plus pretty-link'></i>
    <i class='fa fa-times pretty-link' style="margin-bottom: 2px;"></i>
  </span>
</div>