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

Question

我正在使用 Angular Material 和物化CSS。我对 css 不是很擅长，但我尝试使用它但结果并不多...... 到目前为止，我正在尝试将头像与文本内联，我尝试将 span 与类一起使用以尝试将文本与 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>

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>