CSS图片居中代码怎么写

2020-08-26 18:58:38网站建设

为了让网站页页美观效果更好,让图片居中应该怎么做呢?css图片居中代码怎么写呢?在这里为大家分享css如何让img图片居中,并附上代码。

CSS图片居中方法一:利用display的table-cell属性值

利用display:table-cell来实现img标签图片的水平和垂直居中,还需要配合text-align: center;vertical-align: middle;来设置图片居中。

也就是在CSS样式表中添加如下样式代码:

.div{
display: table-cell; /*主要是这个属性*/
vertical-align: middle;
text-align: center;
}

如上示例的DIV样式,display: table-cell这个属性,会让DIV作为一个表格单元格显示(类似 <td> 和 <th>),在设置text-align: center;就会让img图片水平居中,设置vertical-align: middle;就可以让img图片垂直居中。

CSS图片居中方法二:利用弹性布局flex来设置img图片的居中

设置display: flex;实现flex弹性布局,同时设置justify-content: center;让图片水平居中对齐,设置align-items: center;让图片垂直居中对齐。

样式代码如下:

.div{
display: flex;
justify-content: center;
align-items: center;
}

CSS图片居中代码怎么写相关

在很多时候,为了内容布局效果,需要通过css让图片居中,那么要怎么让图片在div内水平居中呢,代码怎么写?一起来看看吧。

2019-12-17