Question

我有一个p元素，除此之外我通过font方法放置一个材质图标。

两个都是内嵌块并排显示，但我在垂直移动图标时遇到问题而没有破坏相邻的布局。

我尝试将图标包装在div，span中，然后让它的容器相对/绝对地定位，但似乎无法使其表现出来。

我项目的简化示例：

HTML

<div class="card-heading">
  <p>
    my title
  </p>
  <div class="icon-holder">
    <i class="material-icons">camera</i>
  </div>
</div>

SCSS

.card-heading {
  p {
    display: inline-block;
  }

  .icon-holder {
    display: inline-block;

    i {
      padding-top: 6px;
    }
  }
}

说明问题https://codepen.io/joshuaohana/pen/dRqgye

的示例代码

在这个例子中，我试图将图标向下移动6px，但不是同时移动p和图标

Answer 1

使用vertical-align将图标居中。

＆＃13;

.card-heading p {
  display: inline-block;
}
  
.card-heading .icon-holder {
  display: inline-block;
  vertical-align: middle;
}

＆＃13;

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

<div class="card-heading">
  <p>
    my title
  </p>
  <div class="icon-holder">
    <i class="material-icons">camera</i>
  </div>
</div>

＆＃13;

Answer 2

您可以将display: flex添加到.card-heading。需要从padding-top: 6px移除.icon-holder。

Codepen here

详细了解CSS Flexible Box here

＆＃13;

.card-heading {
  display: -webkit-flex;
  display: -moz-flex;
  display: flex;
  
  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center;
}

.card-heading p, .card-heading .icon-holder {
  display: inline-block;
}

＆＃13;

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

<div class="card-heading">
  <p>
    my title
  </p>
  <div class="icon-holder">
    <i class="material-icons">camera</i>
  </div>
</div>

＆＃13;

垂直放置段落文本旁边的材质图标

2 个答案: