为什么我的文字不会与头像对齐?
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>
我正在使用 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>