Html 尝试垂直对齐<；img>；及<；p>；，但是，边距和填充在应用时不起任何作用

我只是尝试垂直对齐图像和文本，使文本位于图像的顶部和底部之间（图像的高度大于文本的高度），但将边距/填充应用到

类不会产生任何效果

.navUsernameP{
显示：内联；
颜色：#fff；
文本对齐：居中；
文字装饰：无；
空白：nowrap；
边缘底部：10px；
}
navUsernameLi先生{
浮动：对；
边缘顶部：10px；
}
.NavProfile图片{
显示：内联；
边界半径：50px；
垂直对齐：继承；
高度：24px；
宽度：24px；
}

用户名

啊，垂直对齐。网络开发者的祸根。我建议使用Flexbox将项目对齐，如下所示：

.container{
显示器：flex；
flex-flow：行nowrap；
调整内容：灵活启动；
对齐项目：居中；
对齐内容：居中对齐；
}
.形象{
flex:01自动；
宽度：50px；
高度：50px；
背景：红色；
}
.用户名{
flex:01自动；
}

用户名