除段落文字外垂直放置素材图标

Question

我有一个p元素，除此之外，我正在通过字体方法放置素材图标。

两者都是内联块并排显示，但我无法垂直移动图标而不破坏邻近的布局。

我曾试图在一个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; 
    } 
    } 
} 

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

在这个例子中，我试图移动图标下降6px，但不是同时移动p an d图标

Answer 1

使用vertical-align居中的图标。

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

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

Answer 2

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

Codepen here。

了解更多关于CSS灵活盒here

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

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