除段落文字外垂直放置素材圖標

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>