css文字圖片對齊_css 設置圖片與文字的對齊方式求教

『壹』如何用CSS讓文字左對齊，圖片居中

方法如下：
一、行高（line-height）法
如果要垂直居中的只有一行或幾個文字，那它的製作最為簡單，只要讓文字的行高和容器的高度相同即可，比如：

p {

height:30px;

line-height:30px;

width:100px;

overflow:hidden;

}

這段代碼可以達到效果。

二、內邊距（padding）法
另一種方法和行高法很相似，它同樣適合一行或幾行文字垂直居中，原理就是利用padding將內容垂直居中，比如：

p {

padding:30px;

}

『貳』怎麼用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>

『叄』 css 設置圖片與文字的對齊方式求教

這里給你解釋一下 <p> 也算是一個容器，什麼叫容器，比如罐子，碗，等，可以在裡面放東西的都屬於容器而<img> 不是容器，只是顯示反映圖片 <p style="text-align:left;" 為什麼寫在<p>裡面，舉例說明，一個紙盒子，我裡面放個球，那麼我想把球放到中間，那麼你說，我的操作是對於哪個而言呢？這個中間，肯定是對應於紙盒子，而非球所以，這里的style 是寫在p裡面而不是 img 至於style="vertical-align; 我也不大清楚，你可以去網路查一下這個屬性的意思。

『肆』關於css文本和圖片的對齊方式。圖片在左面，文字在右面，我想讓右面的文字和圖片全部對齊

<div style="overflow:hidden; zoom:1;">
<img src="" style="float:left; width:50px; height:50px;"/>
<p style="padding-left:60px;">文字文字文字文字文字文字文字</p>
</div>

你要的是不是這個效果？

『伍』 css怎樣使得圖片底部對齊

1、打開Dreamweaver工具，並新建html頁面。

『陸』 css里在一個標簽中如何使文字和左邊圖片對齊成頂部對齊，怎麼布局啊

需要准備的材料分別有：電腦、瀏覽器、html編輯器。

1、首先，打開html編輯器，新建html文件，例如：index.html。

『柒』 css中讓文字和圖片對齊的問題

img是內聯元素，p標簽是塊級元素，所以p標簽內的文字換行很正常。strong標簽是內聯元素，所以會跟img處於同一行，想要img跟strong中的文字垂直居中對齊，需要設置img的vertical-align為middle。

『捌』 css如何使圖片和文字在同一行顯示,文字換行後和圖片對齊

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
">
<htmlxmlns="
http://www.w3.org/1999/xhtml
">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>css如何使圖片和文字在同一行顯示,文字換行後和圖片對齊</title>
<style>
div{width:400px;margin:0auto;}
img{float:left;margin:010px10px0;}
p{width:auto;}
</style>
</head>
<body>
<div>
<imgsrc="img.jpg"width="200"/>
<p>css如何使圖片和文字在同一行顯示,文字換行後和圖片對齊css如何使圖片和文字在同一行顯示,文字換行後和圖片對齊css如何使圖片和文字在同一行顯示,文字換行後和圖片對齊css如何使圖片和文字在同一行顯示,文字換行後和圖片對齊css如何使圖片和文字在同一行顯示,文字換行後和圖片對齊css如何使圖片和文字在同一行顯示,文字換行後和圖片對齊css如何使圖片和文字在同一行顯示,文字換行後和圖片對齊css如何使圖片和文字在同一行顯示,文字換行後和圖片對齊css如何使圖片和文字在同一行顯示,文字換行後和圖片對齊css如何使圖片和文字在同一行顯示,文字換行後和圖片對齊css如何使圖片和文字在同一行顯示,文字換行後和圖片對齊css如何使圖片和文字在同一行顯示,文字換行後和圖片對齊css如何使圖片和文字在同一行顯示,文字換行後和圖片對齊css如何使圖片和文字在同一行顯示,文字換行後和圖片對齊css如何使圖片和文字在同一行顯示,文字換行後和圖片對齊css如何使圖片和文字在同一行顯示,文字換行後和圖片對齊css如何使圖片和文字在同一行顯示,文字換行後和圖片對齊</p>
</div>
</body>
</html>

效果圖是這樣的。注意：img要有「float:left;」或「float:right;」；p一定要設置「width:auto;」

『玖』 css 如何讓文字和圖片對齊

我說：我還是不解，你還是說說如何放下吧。

智者又說：人生無畏，不管善緣惡緣，我們都坦然面對；人生無懼，無論榮華富貴，低賤窘困，我們都從容不迫；緣來了，則聚；緣去了，則散。無論聚散，無論貴賤，無論榮辱，無論生死。靜觀庭前花開花謝，閑看天上雲起雲落，無思亦無慮，這就是放下。

『拾』如何實現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>

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

css文字圖片對齊

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