css设置图片无法居中是什么原因?

在进行网页布局的时候,有时候图片的位置可能会影响整个页面的美观程度,我们经常会设置图片居中显示,但有时我们会遇到css设置图片无法居中。

下面我们来看一下css设置图片无法居中是什么原因。

css设置图片无法居中的原因:

1、必须给网页设置宽度,我们设置图片居中有可能是通过设置图片位置实现居中,若没有设置宽度可能无法居中。

2、img图片调用标签必须在div标签(或者P标签等)内,并设置居中属性。

3、图片的宽度必须小于网页宽度。图片宽度若大于网页宽度也会使图片无法居中。

下面我们来看几种实现图片居中的方法。

1、利用margin: 0 auto实现图片水平居中

css图片水平居中代码:

<div style="text-align: center; width: 500px; border: green solid 1px;">
<img alt="" src="http://img0.imgtn.bdimg.com/it/u=1768770686,623173162&fm=26&gp=0.jpg" 
style="margin: 0 auto;" />
</div>

2、利用文本的水平居中属性text-align: center实现图片水平居中

css图片水平居中代码:

<div style="text-align: center; width: 500px; border: green solid 1px;">
<img alt="" src="http://img0.imgtn.bdimg.com/it/u=1768770686,623173162&fm=26&gp=0.jpg" 
style="display: inline-block;" />
</div>

以上就是css设置图片无法居中是什么原因?的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏