[英]React,HTML,CSS Center Name under Image
我无法在图像下将跨度居中。 这就是我正在使用的。 我有一个对象数组,我想 output 他们的键值对。
var data = profile.map((item, i) => {
return <li className={styles.item}>
<img className = {styles.image_item} src={Object.values(item)}/>
<br/>
<br/>
<span className = {styles.name_item}>{Object.keys(item)}</span>
</li>
})
我的 HTML 代码包含以下内容:
<ul className = {styles.container}>
{data}
</ul>
我的问题是图像下的名称没有正确对齐。 我尝试弄乱跨度的边距,但它不起作用,因为名称可以是不同的长度,使一切都不合适。 有没有办法将图像下方的名称与我正在做的事情正确居中?
.container{
display:flex;
width: 70%;
text-decoration: none;
padding-left: 0px;
margin-left: 75px;
margin-top: -100px;
flex-wrap: wrap;
}
.item{
display: inline;
flex: 0 0 33%;
margin-top: 150px;
}
.image_item{
width: 150px;
height: 150px;
border-radius: 50%;
}
.name_item{
text-align: center;
}
Span 是不填充父宽度的内联元素。 交换并且应该工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.