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

Question

我正在使用angular-material和materializecss。我对css的态度不是很强，但是我试着玩它并没有多少结果...... 我试图用文本内联化身到目前为止我试图使用span与类一起尝试将文本与img一起设置，但没有成功.. 到目前为止我得到的最好的结果是，化身后的头像，但略低于头像。

我的HTML和自定义CSS。

mapIO' :: Frameworks t => (a -> IO b) -> Event t a -> Moment t (Event t b)

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

}

Answer 1

使用此：

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