圖片與文字如何對齊 css圖片和文字對齊的辦法？

2021-03-11

1169

css圖片和文字對齊的辦法？1. 打開Dreamweaver工具并創(chuàng)建一個新的HTML頁面。2. 切換到編寫代碼的接口。3. 代碼如下：<div><img SRC=“images/1。Jp

css圖片和文字對齊的辦法？

1. 打開Dreamweaver工具并創(chuàng)建一個新的HTML頁面。

2. 切換到編寫代碼的接口。

3. 代碼如下：<div><img SRC=“images/1。Jpg“width=”20px“height=”20px“>我是文本</div>

4。預覽頁面如下圖所示。我們可以看到圖像和文本沒有對齊，所以我們向IMG標簽添加樣式。

5. 代碼如下：style=“vertical align:Bottom”

6。預覽HTML頁面，您可以看到它在下面對齊

在HTML中，您可以對齊圖片和文本。在這種情況下，您可以將圖片和文本放入兩個div中，然后用div將它們包裝起來，并將float屬性設置為兩個div。當然，寬度和高度不受限制，然后使用margin使兩個div有一點空間。在這里我提交一段代碼：

我是右邊的測試文本

要準備的材料有：電腦、瀏覽器和HTML編輯器。

1. 首先，打開HTML編輯器并創(chuàng)建一個新的HTML文件索引.html.

2. 在索引.html在<style>選項卡中，輸入CSS代碼：IMG{浮動：左}。

3. 瀏覽器正在運行索引.html此時，div標簽中的左圖片和右圖片在頂部對齊，以便通過CSS調(diào)整進行浮動。

方法如下：

1。行高法。如果在垂直中心只有一行或幾個單詞，則最容易生成，只要文本的行高與容器的高度相同，例如：P{高度：30px線高：30像素寬度：100px溢出：Hidden}此代碼可以實現(xiàn)此效果。

2、另一種填充方法與線高度法非常相似。它也適用于一行或幾行文本垂直居中。其原理是使用填充將內(nèi)容垂直居中，例如P{填充：30px}