圖片與文字是做網(wǎng)站必不可少的要素，我們?cè)谑褂脠D片與文字布局時(shí)，如何讓圖片和文字在同一行對(duì)齊顯示來制作出一個(gè)整齊的網(wǎng)頁出來。

對(duì)于一些學(xué)做網(wǎng)站新手來說，圖片和文字在同一行對(duì)齊顯示卻不是一件容易的事情，這主要是由于他們對(duì)CSS 的知識(shí)并不是太了解。（了解更多CSS知識(shí)，可學(xué)習(xí)DIV+CSS教程.）

CSS控制圖片和文字在同一行對(duì)齊顯示

默認(rèn)情況下，一個(gè)區(qū)域內(nèi)有一段文字和圖片，文字與圖片的對(duì)齊方式為底部對(duì)齊。如下圖:

如果要文字與圖片的頂部對(duì)齊，需要設(shè)置圖片的垂直對(duì)齊屬性vertical。可以在IMG標(biāo)簽中加入這個(gè)屬性，并且把它的值設(shè)為top;

我們看到當(dāng)一段文字，我們使用圖片的垂直屬性來控制圖文對(duì)齊時(shí)，只能控制一段文字的第一行與圖片的頂部對(duì)齊，而下面的文字卻并沒有與圖片對(duì)齊，所以對(duì)齊屬性vertical只適用于一行文字的對(duì)齊。

圖片與一段文字頂部對(duì)齊的CSS寫法

做網(wǎng)站時(shí)，往往是在一段文字中插入一張圖片，我們?nèi)绾巫尵W(wǎng)站中的一段文字與圖片頂部對(duì)齊呢？我們可以使用float屬性。代碼如下：

通過設(shè)置圖片為左浮動(dòng)，就可以讓圖片位于整個(gè)區(qū)域名的左邊，文字處于圖片的右邊與圖片的頂部對(duì)齊。還可以通過設(shè)置margin屬性來設(shè)置圖片與文字之間的距離。

相關(guān)教程：怎樣在圖片上寫文字

標(biāo)簽： 代碼 域名

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。