200字范文,内容丰富有趣,生活中的好帮手!
200字范文 > DIV+CSS图片和文字如何显示同一行

DIV+CSS图片和文字如何显示同一行

时间:2023-02-09 02:16:00

相关推荐

DIV+CSS图片和文字如何显示同一行

如果把文字和图片放在同一个图层的,文字可以做到居中,但是图片就不能,因为图片默认是左上对齐的!如果你令到图片居中了,文字就会相对于图片右下对齐了!如果你想2个都居中的话,就不能把他们放在同一个div,或者你试下把他们放在2个div中,或者一个图片放div中,文字直接放页面中,不放div ,这样会给网页减瘦的!呵呵!

补充下:文字居中的,只要用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" "/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="/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中

文章来源:侠客站长站() 详文参考:/zz/webyy/zzjs/09/22-3035.html

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。