永发信息网

css html 如何将图片img标签 水平居中 垂直居中 和水平垂直居中

答案:4  悬赏:0  手机版
解决时间 2021-02-06 04:23
  • 提问者网友:孤山下
  • 2021-02-05 20:29
css html 如何将图片img标签 水平居中 垂直居中 和水平垂直居中
最佳答案
  • 五星知识达人网友:旧脸谱
  • 2021-02-05 21:57
水平居中的话就在img所在的标签设置text-align:center
垂直居中的话就在img上设置vertical-align:middle
至于水平垂直居中?这的问题与上面的已经重复了
例如:
追问请允许我追问下:如果在设置了最大宽度和最大高度的情况下,同时需要水平垂直居中,应该如何处理~?追答无论是最大还是最小宽度高度,并不会影响图片的水平和垂直方向居中;
有一个要提醒下你,如果你div内插入了img图片后就尽量别插入其他元素,比如文字或者其他标签,否则img可能会不是100%的垂直居中,可能会偏上或者偏下一点点距离

其实还有其他方法垂直居中的,那就是设为背景图片并设定图片一直处于水平和垂直方向居中即可,这个也是无论div宽度高度是多少都居中的
background:url(图片) center no-repeat;追问帮忙看看我的问题补充,谢谢~追答按照你给的样式,我这里测试是没问题的,你用360浏览器的代码查看工具F12或者火狐的Firebug检查一下代码和样式,看看是哪里出问题了
全部回答
  • 1楼网友:十鸦
  • 2021-02-06 01:05

由于img是个特殊的内联元素,所以要将其设置为块级元素或设置定位才能让其居中显示。
img标签水平居中(方法一,设置为块级元素):
img标签水平居中(方法二,设置定位):

img标签垂直居中:
img标签垂直水平居中:
  • 2楼网友:琴狂剑也妄
  • 2021-02-06 00:01
可以通过padding ,margin的值控制居中,如果有走位的,可以试试加个display:inline;追问这样控制居中太麻烦,因为后台读出数据的图片尺寸不一追答图片尺寸不一的话,只能给图片加固定数值了,这样,不会担心图片大小不一被挤了。或者给图片层定义下overflow:hidden;追问在图片太大,并使用overflow:hidden的情况下,如何令图片居中?使用margin或者padding控制吗?追答这个用margin和padding应该控制不了居中,看看能不能用js控制吧
  • 3楼网友:罪歌
  • 2021-02-05 22:38
其实很简单的,img{margin:0 auto} 把图片取成块 display:block margin:0 auto 看能不能水平居中
我要举报
如以上回答内容为低俗、色情、不良、暴力、侵权、涉及违法等信息,可以点下面链接进行举报!
点此我要举报以上问答信息
大家都在看
推荐资讯