在CSS中,如何设置图片居中呢?首先,我们需要设置图片的父元素的样式,让其成为一个“容器”,可以容纳我们的图片。然后再对图片本身进行一些样式调整。具体来说,在容器元素上,我们可以使用以下CSS代码:.
.container { display: flex; /*利用Flexbox布局*/ justify-content: center; /*设置主轴居中对齐*/ align-items: center; /*设置侧轴居中对齐*/ }
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>居中图片 CSS 教程示例</title> <style> .container { display: flex; justify-content: center; align-items: center; } </style> </head> <body> <div class="container"> <img src="example.jpg" alt="示例图片"> </div> </body> </html>
粉丝
0
关注
0
收藏
0