css中图片居中显示的代码怎么写
css 中可使用以下代码水平居中图片:设置容器元素 text-align: center;。将图片设为内联块级元素 display: inline-block;。使图片垂直居中 vertical-align: middle;。垂直居中图片:将容器元素设为 flexbox display: flex;。使子元素垂直居中 align-items: center;。使子元素水平居中 justify-content: center;。限制图片大小 max-width: 100%;,max-height:
CSS 中图片居中显示代码
问题:如何使用 CSS 代码让图片在元素中水平和垂直居中显示?
回答:
水平居中
立即学习“前端免费学习笔记(深入)”;
.image-container { text-align: center;}.image { display: inline-block; vertical-align: middle;}
垂直居中
.image-container { display: flex; align-items: center; justify-content: center;}.image { max-width: 100%; max-height: 100%;}
详细说明:
水平居中
立即学习“前端免费学习笔记(深入)”;
垂直居中