Question

很抱歉，标题令人困惑。希望图像说明一切。

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

我知道我可以使用类似位置的东西来推动x几个像素，但我正在寻找一种更加一致的解决方案，适用于几种不同的屏幕尺寸。

继承人的HTML。 if (isset($_GET['del'])) { // your profile.php code here } else { // error message }只是一个将cursor属性设置为hand和pointer

的类

pretty-link

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

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

这是一个利用vertical-align的例子，不起作用

http://jsfiddle.net/hw4au2km/

在每个例子中，x仍略低于+

为包装范围设置显式宽度并浮动每个：

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

在这些例子的每一个中，x似乎都略低于+，所以也许这是fa的问题？

对于那些从谷歌来到这里的人来说，我认为fa-times图标可以很容易地以这种方式对齐。所有上述解决方案都非常适用于fa-plus和fa-minus，但fa-times图标略微偏离中心。也许有人可以找到解决方案但是现在我已经切换到我的项目的材料图标。

Answer 1

我创建了此代码段来帮助您解决问题。如您所见，这两个块具有不同的高度，但为它们display: inline-block;和vertical-align: middle;提供垂直居中。希望它有所帮助：）

＆＃13;

.element.first {
  font-size: 65px;
  background: blue;
  margin-right: 10px;
}

.element.second {
  font-size: 35px;
  background: yellow;
}

.element {
  display: inline-block;
  vertical-align: middle;
}

＆＃13;

<div class="container">
  <div class="element first">First Icon</div>
  <div class="element second">Second Icon</div>
</div>

＆＃13;

Answer 2

您可以使用flexbox or line-height。如果您使用autoprefixer和任务运行器，Flexbox是最好的方式。

<强> HTML

<h3>
Normal
</h3>
<span>
    <i class="fa fa-minus pretty-link"></i>
    <i class="fa fa-times  pretty-link"></i>
    Lorem ipsum
</span>
<hr>
<h3>
Flex
</h3>
<span class="container-flex">
    <i class="fa fa-minus pretty-link"></i>
    <i class="fa fa-times  pretty-link"></i>
    Lorem ipsum
</span>
<hr>
<h3>
Line Height
</h3>
<span class="container-line-height">
    <i class="fa fa-minus pretty-link"></i>
    <i class="fa fa-times  pretty-link"></i>
</span>

<强> CSS

.container-flex{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;  
}

.container-line-height .fa{
  vertical-align: middle;
  display: inline-block;
}

Answer 3

为您的span班级提供宽度和高度，然后提供您的第一个<i>班级float:left;和第二个<i>班级float:right;两个{{1}必须在px中有宽度;

Answer 4

你可以试试这个

<!DOCTYPE html>
<html>
  <head>
    <style>
    .textpart {
      margin-left: -6px;
    }
    </style>
  </head>
  <body>
<h1 class="text">+<span class="textpart">X</span></h1>
  </body>
</html>

Answer 5

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

在每个项目的中间垂直对齐两个项目

5 个答案: