div文字圖片對齊_在一個DIV中怎樣讓文字跟圖片居中對齊

『壹』在一個DIV中怎樣讓文字跟圖片居中對齊

兄弟，我給你寫了個示例，把下面代碼復制過去看看吧：
DIV中怎樣讓文字跟圖片居中對齊的鍵在於這個屬性 vertical-align:middle;
------------------------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>無標題頁</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td { margin: 0; padding: 0; font-size:12px; }
.clearfix:after { content:'\0020'; display:block; height:0; clear:both; }
.clearfix { *zoom:1;
}
.test { height:100px; width:200px; line-height:100px; border:solid 1px #000; margin:100px auto; padding:0 30px; }
.test img{border:solid 1px #000; vertical-align:middle;}
</style>
</head>
<body>
<div class="test">
這個對齊了<img src="http://img..com/img/logo-.gif" />
</div>
</body>
</html>

『貳』 css html 如何讓div里邊的圖片和文字同時上下居中

方法步驟如下：

1、首先打開計算機，使用瀏覽器打開a.html，可以看到默認情況，是圖片置頂對齊，文字置底對齊，所以通常圖片高，文字低，不能水平居中對齊。

『叄』 div里圖片與文字水平居中對齊

vertical-align
用div把文字和圖片分別括起來，div設置float為left
<div style="height:500px;line-height:500px;">
<div style="float:left;height:500px;vertical-align:middle;">
<img src=""/>
</div>
<div style="float:left;height:500px;vertical-align:middle;">
sdf
</div>
</div>

『肆』 DIV內圖片文字如何水平對齊如圖

<style>

img {

vertical-align: middle;

}

</style>

<div>

<span>阿薩德各位給二哥如果微軟</span>

</div>

『伍』如何實現div+css實現圖片與文字水平對齊

實現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>

『陸』怎麼用DIV+CSS實現圖片和文字垂直中心對齊

一行文字可以通過line-height和高度相同來實現垂直中心對齊，圖片的話可以給圖片添加vertical-align:middle;來實現，示例如下：

<style>
p{line-height:100px;hieght:100px;text-align:center;}
div{height:200px;text-align:center;}
divimg{vertical-align:middle;width:80px;height:80px;}
</style>
<p>示例文字</p>
<div><imgsrc="圖片"/></div>

如果是多行文字的話就得用到CSS的表格特性來做，示例如下：

<style>
.box{position:relative;width:200px;height:200px;margin:40pxauto0auto;background:#282d33;border:solid1px#171717;box-shadow:inset001pxrgba(255,255,255,0.4);color:#bbb;}
.box.tag{position:absolute;top:-11px;left:70px;width:60px;height:20px;background:#1b1b1b;border:solid1px#171717;text-align:center;}

/*IE6+支持圖片和多行文字水平垂直居中*/
.ie_imgText{display:table;width:200px;height:200px;text-align:center;*position:relative;}
.ie_imgText.cell{vertical-align:middle;display:table-cell;*position:absolute;*top:50%;*left:50%;}
.ie_imgText.content{*position:relative;*top:-50%;*left:-50%;}
</style>
<divclass="box">
<divclass="ie_imgText">
<divclass="cell">
<divclass="content">
<imgsrc="圖片"alt="">
<p>文字文字</p>
<p>文字文字文字</p>
</div>
</div>
</div>
</div>

『柒』 div+css中圖片和文字對齊

</style>

#content

{

width:422px;

height:180px;

border-bottom:1px dashed #96c5ef;

}

img{

border:2px solid #ca0000;

float:left;

}

.left{

float:left;

vertical-align:middle;

}

.right{

float:right;

width:230px;

font:12px;

}

</style>

</head>

<body>

<img src="images/1.jpg"

align="absmiddle">

導航:首頁 > 文字圖片 > div文字圖片對齊

div文字圖片對齊

與div文字圖片對齊相關的資料