如何让div中的image垂直 水平居中?急!!!

问题描述

我的代码如下:<divid="nav"><ul><li><imgsrc="images/nav1.gif"/></li><li><imgsrc="images/nav2.gif"/></li><li><imgsrc="images/nav3.gif"/></li><li><imgsrc="images/nav4.gif"/></li><li><imgsrc="images/nav5.gif"/></li><li><imgsrc="images/nav6.gif"/></li><li><imgsrc="images/nav7.gif"/></li><li><imgsrc="images/nav8.gif"/></li><li><imgsrc="images/nav9.gif"/></li></ul></div>css如下:#nav{width:100%;height:30px;background-color:#1a1a1a;text-align:center;margin:0auto;}#navul{list-style:none;margin:0px;padding:0px;}#navulli{float:left;padding:0px12px;height:30px;line-height:30px;display:inline;}需要的效果是这样的。

解决方案

解决方案二:
把你效果的那个网址发过来
解决方案三:
#navulli{text-align:center;}
解决方案四:
#navulliimg{display:table-cell;vertical-align:middle;}

把img转换成table元素,然后用vertical-align:middle;设置垂直居中这样试试
解决方案五:
引用1楼p2227的回复:

把你效果的那个网址发过来

网站还没上呢。麻烦你自己用我的代码试下。谢谢。
解决方案六:
引用3楼mubeibei的回复:

CSScode#navulliimg{display:table-cell;vertical-align:middle;}把img转换成table元素,然后用vertical-align:middle;设置垂直居中这样试试

这个垂直居中没效果的。。。我测试过了。
解决方案七:
引用2楼dencey的回复:

#navulli{text-align:center;}

这个好像只能针对li中是文字的形式。img不行。。
解决方案八:
引用5楼tianbianyue1227的回复:

引用3楼mubeibei的回复:CSScode#navulliimg{display:table-cell;vertical-align:middle;}把img转换成table元素,然后用vertical-align:middle;设置垂直居中这样试试这个垂直居中没效果的。。。我测试过了。

那只能用maring-top顶了~·既然你外层DIV是固定30px那你就用maring-top顶下吧~·
解决方案九:
或者padding都行
解决方案十:
用padding或者margin控制
解决方案十一:
引用8楼mubeibei的回复:

或者padding都行

谢谢,是的。刚才我用这种方法解决了。同时谢谢其他朋友的热心帮助。
解决方案十二:
自己写的看一下,这里就不贴了
解决方案十三:
height:30px;line-height:30px
解决方案十四:
给li设置margin一个合适的像素

时间: 2024-10-23 12:25:00

如何让div中的image垂直 水平居中?急!!!的相关文章

div布局-请问怎么让div中的div在垂直方向上居中呢?

问题描述 请问怎么让div中的div在垂直方向上居中呢? 比如:下面这段代码,如何让里面的div在垂直方向上面居中呢(不好意思,实在是没有悬赏币了) .out{ width:500px; height:500px; background:blue;}.inn{ width:200px; height:200px; background:red;} 解决方案 你的inn怎么比out还大..搞反了吧..通过margin来定位.absolute定位最好,不需要考虑父容器,只需要依据自身的宽和高度来调整

纯js代码实现未知宽高的元素在指定元素中垂直水平居中显示_javascript技巧

下文以span元素为例子,介绍一下如何实现span元素在div中实现水平垂直居中效果,代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title></title> <sty

纯css完美地解决图片在div内垂直水平居中,兼容全部浏览器

本站提供的方法,纯css完美地解决图片在div内垂直水平居中,兼容IE7.0.IE6.0.IE5.5.IE5.0.FF.Opera.Safari...... 强烈推荐收藏! [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

纯css完美实现图片在div内垂直水平居中

以下是要实现插入图片的绝对居中,如果你仅仅是想让图片居中,最简单的方法是设为背景图片,如: div {    width:500px;border:1px solid #f00;    height:500px;    background:url("/images/logos.gif") center no-repeat    } 言归正转,请看以下代码实现图片在div内垂直水平居中: 以下是HTML网页特效代码,点击运行按钮可查看效果: [Ctrl+A 全部选择 提示:你可先修改部

css中固定高度容器内的图片垂直水平居中的实例

在某一个网站(freeappstools)上看到的这个"新奇"解法,说新奇,主要是国内各种总结的方法都没提到过,打引号,只是因为其中的原理很多人都知道:即依靠行高(line-height)的方法.  line-height对于img元素并不起作用:  代码如下 复制代码 <div style="height:250px;background:#ccc;line-height:250px;width:400px;text-align:center;">  

CSS图片响应式 垂直水平居中_javascript技巧

我看最近微博流行CSS居中技术,我看了几编资料写的都不多好,于是抽时间把相关资料整合了,具体内容如下. 点击此处下载源码 效果展示: 要求: 1.尽可能兼容更多浏览器,这里兼容到ie7,ie6不支持max-*就不考虑了. 2.浏览器尺寸变化时,图片总是等比例拉伸或缩放. 3.包裹图片的div也是响应式的,并且每个div的尺寸是一样的. 4.图片始终保持水平垂直居中. 5.图片的行列数不变,这里一直都是3*3. 下面来搞定一个个要求. 满足要求1意味着这里要尽量不使用高级浏览器才有的属性,比如高级

控制DIV中文字绝对居中的简单方法

DIV中的文字绝对居中以前老是用表格,现在有了很好的解决方案line-height便可轻松实现,感兴趣的朋友可以参考下,希望对大家有所帮助   搞了这么久,以前不知道怎么弄,老是用表格,今天终于搞清楚了... 水平居中:<div align="center">Content</div> 垂直居中:<div style="line-height:30px;height:30px;">Content</div> 两者结合,

div布局-div中加div,如果里面的div给margin-top,则外面的div就会整体下移,如何解决

问题描述 div中加div,如果里面的div给margin-top,则外面的div就会整体下移,如何解决 div布局中:div中加div,如果里面的div给margin-top,则外面的div就会整体下移,如何解决 解决方案 你外层div高度是否是固定的,如果是固定的可以改成百分比的: 上面是一个解决办法; 还有一个,如果你外层div定义了样式,你可以将border去掉,这样就可以margin-top了,假设这个网页就这两个div,则里面的div的margin-top是针对网页的 body所言的

css实现在div水平垂直居中与图片水平居中的效果

div居中的完美解决方案! (水平垂直居中) 1,关于居中使用css为:  代码如下 复制代码 position:fixed;left:50%;top:50%;margin-left:width/2;margin-top:height/2; 对于ie6,只能把position:改成absolute; 图片在div中居中 利用图片的margin属性将图片水平居中,利用div的padding属性将图片垂直居中. 方法一: css代码如下:  代码如下 复制代码 div {width:300px; h