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

最新推荐文章于 2024-07-12 10:42:39 发布

gogiqp_jyh

最新推荐文章于 2024-07-12 10:42:39 发布

阅读量5.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： css

本文链接：https://blog.youkuaiyun.com/gogiqp_jyh/article/details/17358483

css 专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何在网页设计中实现文字和图片的垂直居中显示，包括利用CSS属性如line-height、vertical-align等，并提供示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

　如果把文字和图片放在同一个图层的，文字可以做到居中，但是图片就不能，因为图片默认是左上对齐的！如果你令到图片居中了，文字就会相对于图片右下对齐了！如果你想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" "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中