如何实现div+css实现图片与文字水平对齐？

如题所述

第1个回答推荐于2016-04-04

实现div+css实现图片与文字水平对齐,首先需要的是用3个div布局，一个div包裹着其他的2个，给每个div设置好一定的宽度和高度，然后在对包裹的2个div使用float这个属性，float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。具体可以看下代码：
<html>
<head>
<style>
#round{
width:600px;
height:300px;
}

#div1{
width:200px;
height:250px;
float:left;
}

#div2{
width:200px;
height:250px;
float:left;
}
</style>
</head>
<body>
<div id='round'>
<div id='div1'>
<img src='图片地址'>
</div>
<div id='div2'>
<p>我是测试文字</p>
</div>
</div>
</body>
</html>

第2个回答推荐于2016-04-19

在用div+css对网站进行排版时，我们会碰到这样一个问题，也就是当图片与文字在同一个标签内（li或是dd或是div)的时候，文字往往是居底，不能与图片在同一水平线上对齐；如果对不齐，我们往往要写几个不同的名称来实现。这样很麻烦，而且实现起来也不太好，严重影响着代码的冗余。我想很多人碰到过这样的问题。
第一种方法：
可以这么处理，给图片加上一个属性 align=”absmiddle” 。这个是直接写在图片上面。
第二种方法：
给这个图片定交一个CSS样式，例如你用到的样式是aa.然后你可以对aa再加上一个图片的属性也就是
大家可以根据自己的习惯性情况量着用。本回答被提问者采纳

相似回答

DIV内图片文字如何水平对齐 如图答：1、图片和文字各放入独立的块级容器。然后以padding-top或margin-top来控制。2、对图片添加样式vertical-align:middle;如：<div><img src="url" style="vertical-align:middle;" />文字</div>

div+css中 图片和文字对齐答：</div> </body> </html> 最终的图片

用div+css做网页时怎样把文字和插入的图片平行?答：你可以将图片做为背景，将左边padding一个图片的宽度，这样就可以自由控制高度，而图片不会受到影响。

css+div怎么对齐?答：div+css对齐分两种情况一种是：文字对齐；另一种是区域块儿设置浮动，让他们浮动，而实现出来的效果即是对齐；如下演示：1、文字实现居对齐网页中实现效果：如下图：详解：主要属性：text-align:left;使文字实现居左对齐扩展：text-align:right; 使文字靠右对齐，center文字居中；2、区域块儿设置浮动...

css如何使图片和文字在同一行显示,文字换行后和图片对齐答：文字换行后和图片对齐</title><style>div { width:400px; margin:0 auto;}img { float:left; margin:0 10px 10px 0;}p { width:auto;}</style></head><body><div><img src="img.jpg" width="200" /><p>css如何使图片和文字在同一行显示,文字换行后和图片对齐css如何使图片和文字在...