3-3编程问题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>移动端</title>
<style>
*{
margin:0px;
padding:0px;
}
/*补充代码*/
.box{
display: flex;
justify-content: space-around;
align-items: flex-start;
}
.box > .box-item{
width: 17%;
height: 345px;
border: none;
box-shadow: 0 0 20px grey;
border-radius:7px ;
text-align: center;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: space-around;
}
.box > .box-item p{
height: 100px;
margin:0 20px ;
color: grey;
overflow: hidden;
}
.box > .box-item img{
display: block;
width: 60%;
border-radius:50% ;
background-clip:border-box ;
align-self: center;
flex-shrink: 0;
}
</style>
</head>
<body>
<div class="box">
<div class="box-item">
<img src="http://img1.sycdn.imooc.com/climg//591411a400018ad902000200.jpg" alt="">
<h1>快乐动起来呀</h1>
<p>先后在360、去哪儿网、今日头条任资深前端工程师，在业务开发和工程架构方面有较多实战经验。</p>
</div>
<div class="box-item">
<img src="http://img1.sycdn.imooc.com/climg//591411b400010aa702000200.jpg" alt="">
<h1>7七月</h1>
<p>作为微信小程序第一波开发者，他受邀编写小程序开发书籍，不久就会出版，他喜欢写代码带来成就感。</p>
</div>
<div class="box-item">
<img src="http://img1.sycdn.imooc.com/climg//591411c0000199be02000200.jpg" alt="">
<h1>Geely</h1>
<p>Geely，丰富的互联网项目经验，公司内部技术讲师，热爱技术，乐于分享。教学格言：把复杂的技术简单化，简单的技术极致化</p>
</div>
<div class="box-item">
<img src="http://img1.sycdn.imooc.com/climg//591411b400010aa702000200.jpg" alt="">
<h1>Scott</h1>
<p>是国内最早接触 Node.js 的工程师，也是最早用 Node.js 做开发的工程师之一，拥有大量 Node.js 全站开发经验。</p>
</div>
<div class="box-item">
<img src="http://img1.sycdn.imooc.com/climg//591411cb0001483f02000200.jpg" alt="">
<h1>moocer</h1>
<p>曾混迹于企业应用领域，后转战电商，现奋战于互联网教育行业，转眼间已匆匆数年，喜爱技术甚于自己，至今不悔。感天地之广大，岁月之蹉跎，若能重来，仍代码。</p>
</div>
</div>
</body>
</html>>
中的
.box > .box-item img{
display: block;
width: 60%;
border-radius:50% ;
background-clip:border-box ;
align-self: center;
flex-shrink: 0;
}
为什么在为图片设置了宽度之后，图片会自动向左靠，
这里我设置了align-self:center才能够居中
正在回答 回答被采纳积分+1
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 2198 份
- 解答问题 5012 个
如果你有web端基础，既想进阶，又想进军移动端开发，那就来吧，我们专题为你带来的课程有HTML5、CSS3、移动基础、响应式、bootstrap、less等，让你在前端道路上畅通无阻！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星