为什么我的文字不会与头像对齐?

Why my text wont align with avatar?

我正在使用 angular-material 和 materializecss。我对 css 不是很擅长,但我尝试使用它但结果并不多...... 到目前为止,我正在尝试将头像与文本内联,我尝试将 span 与 class 一起使用来尝试将文本与 img 一起设置样式,但没有成功。 到目前为止我得到的最好结果是,文字在头像之后但略低于头像。

我的 HTML 和自定义 css.

.gallery{
 margin-bottom: 10px;
}
.responsive-img{
 width: 100%;
}

.img-info{
 text-align: center;
 background: #b3e5fc;
 color: black;
 width: 100%;
 margin-bottom: 10px;
 padding: 10px 0;
 
}

.circle{
  width: 60;
    margin: 10px 5%;
}

.black-text{
 text-align: center;
}

.circle .black-text{
    
 display: inline;

}
 <div class="row gallery">
  <div class="col l3 col m4 col s12"  ng-repeat="image in images"> 
  <md-card class="z-depth-3">
   
     <!--INSTAGRAM PHOTOS-->
     <a>
   <img class="responsive-img" ng-src="{{image.images.standard_resolution.url}}" alt="">
   </a>
     <!--USER AND AVATAR-->
     
    <div class="img-info">
     <img class="circle" ng-src="{{image.user.profile_picture}}">{{image.user.username}}
       
        
    </div> 
    </md-card>
   </div>
  </div>

使用这个:

.img-info img.circle{
     vertical-align: middle;
}

下次分享呈现 HTML,你分享的 html 没有用。

片段:

.img-info img.circle{
     vertical-align: middle;
}

.gallery{
 margin-bottom: 10px;
}
.responsive-img{
 width: 100%;
}

.img-info{
 text-align: center;
 background: #b3e5fc;
 color: black;
 width: 100%;
 margin-bottom: 10px;
 padding: 10px 0;
 
}

.circle{
  width: 60;
    margin: 10px 5%;
}

.black-text{
 text-align: center;
}

.circle .black-text{
    
 display: inline;

}
 <div class="row gallery">
  <div class="col l3 col m4 col s12"  ng-repeat="image in images"> 
  <md-card class="z-depth-3">
   
     <!--INSTAGRAM PHOTOS-->
     <a>
   <img class="responsive-img" ng-src="{{image.images.standard_resolution.url}}" alt="">
   </a>
     <!--USER AND AVATAR-->
     
    <div class="img-info">
     <img class="circle" src="http://dummyimage.com/50x50/000655/fff"> The text
       
        
    </div> 
    </md-card>
   </div>
  </div>