温馨提示×

css如何让图片居中

css
养鱼的猫咪
403
2021-03-24 14:37:50
栏目: 编程语言
前端开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

在css中设置图片居中的方法:1.使用background-position属性设置图片居中;2.使用text-align属性设置图片居中;

css如何让图片居中

在css中设置图片居中的方法

1.使用background-position属性设置图片居中

页面布局:

<body>

        <div class="demo"></div>

</body>

css样式:

.demo{

      width400px;

      height300px;

      margin50px auto;

      border1px dashed #000;

      background-image:url(1.jpg) ;

      background-size:200px 160px ;

      background-position:50% 50% ;   /* 设置图片居中 */

      background-repeat:no-repeat ;

      }

2.使用text-align属性设置图片居中

页面布局:

<body>

     <div class="content">

<img src="images/1.jpg" />

     </div>

</body>

css样式:

.content{

width:400px;

height:300px;

text-align:center; /* 设置图片居中 */

}


亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

推荐阅读:css如何让文字居中

0