您的位置：首页 > Web前端 > CSS

用DIV+CSS布局中,如何设置图片与文字在同一高度?

2010-04-15 12:03 756 查看

如果把文字和图片放在同一个图层的，文字可以做到居中，但是图片就不能，因为图片默认是左上对齐的！这就是为什么在制作的时候看到图片

会靠上的原因。如果你令到图片居中了，文字就会相对于图片右下对齐了！如果你想2个都居中的话，就不能把他们放在同一个div,或者你试下

把他们放在2个div中，或者一个图片放div中，文字直接放页面中，不放div ，这样还可以给网页瘦身。

把那个放图片和文字的层css设置为比如id叫#aa

#aa {height: 30px; line-height:30px; vertical-align: middle;}

这样就可以使里面的东西在层里垂直居中了。一定要设置相同高度和间距。

把图片加上align="absmiddle"

<img src="http://img.baidu.com/img/logo-zhidao.gif
" align="absmiddle" /> [/code]

我是用这个方法解决的。

我的文字和图片在同一个span里面，我在图片中加上这个属性就解决问题了。但是直接写在页面里面是否有表现和结构不分离的嫌疑呢？呵呵

补充下：文字居中的，只要用line-height就可以控制居中，图片居中的话，要用padding或者margin!

　　 DIV没有文字垂直居中属性，这个确实是个缺陷问题。

需要把图片和单行文字垂直居中对其，可以给图片 的CSS 定义一个vertical-align: middle; 的属性，这样 单行文字就可以垂直居中于图片了。

　　如果多行，只能采用嵌套DIV 的方式，然后调整margin 不要调整padding。 在IE6里面定义了 高度 或者宽度的DIV 使用padding会出现bug。

　　另外可以使用原本的办法，给图片内部设置属性align="absmiddle"

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns=" http://www.w3.org/1999/xhtml ">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>div 里面图片垂直居中的几个例子</title>

<style type="text/css">

<!--

div {

width:500px;

height:500px;

line-height:500px;

border:1px solid #666;

overflow:hidden;

position:relative;

text-align:center;

}

div dt {

+position:absolute;

top:50%;

vertical-align:middle

}

img {

position:static;

+position:relative;

top:-50%;left:-50%;

vertical-align:middle

}

-->

</style>

</head>

<body>

<div><dt><img src="logo.gif" /></dt></div>

</body>

</html>

以上代码是图片居中

height:100%;display:inline-block;vertical-align:middle;

以上代码是文字居中

文字可以写在span中

[/code]

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航