CSS入門知識-圖片水平對齊技巧
在CSS中,圖片怎麼水平對齊,有哪些技巧呢?我們一起來學習一下吧!
一、圖片水平對齊text-align
在“文本水平對齊text-align”這一節我們詳細講解了text-align屬性。大家請記住,text-align一般只用在兩個地方:文本水平對齊和圖片水平對齊。也就是説,text-align只對文本和img標籤有效,對其他標籤無效。
語法:
text-align:屬性值;
説明:
text-align屬性取值如下表:
表1 text-align屬性
<!DOCTYPE html>
<html xmlns="">
<head>
<title>圖片水平對齊</title>
<style type="text/css">
p
{
width:300px;
height:80px;
border:1px solid gray;
}
.p_img1{text-align:left;}
.p_img2{text-align:center;}
.p_img3{text-align:right;}
img{width:60px;height:60px;}
</style>
</head>
<body>
<p class="p_img1">
<img src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/>
</p>
<p class="p_img2">
<img src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/>
</p>
<p class="p_img3">
<img src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/>
</p>
</body>
</html>
在瀏覽器預覽效果如下:
分析:
很多人都以為設置圖片水平對齊是在img標籤設置,其實這是錯誤的'。大家記住,圖片是要在父元素中進行水平對齊的。在這個例子中,img元素的父元素是p,img元素是相對於p元素進行水平對齊的。因此要想對圖片進行水平對齊,就要在父元素(p元素)中設置text-align屬性。
-
如何理解Javascript的caller,callee,call,apply區別
在提到上述的概念之前,首先想説説javascript中函數的隱含參數:argumentsarguments該對象代表正在執行的函數和調用它的函數的參數。[function.]arguments[n]參數function:選項。當前正在執行的Function對象的名字。n:選項。要傳遞給Function對象的從0開始的參數值...
-
javascript的return語句的作用
return語句在js中非常的重要,不僅僅具有返回函數值的功能,還具有一些特殊的用法,有個清晰的把握是非常有必要的。下面就結合實例簡單介紹一下return語句的作用。用來返回控制和函數結果:通常情況,return語句對於一個函數是很有必要的`,因為往往需要函數在一系列的代...
-
javascript中的return和閉包函數
複製代碼代碼如下:functionmakefunc(x){returnfunction(){returnx;}}alert(makefunc(0));其實不是不執行,只是朋友的意思這裏alert出來的`應該是“0”,而不是function(){returnx;}。不是腳本寫錯了,只是沒搞懂return,從當前函數退出,並從那個函數返回一個值。如果返...
-
Dreamweaver輸入的文本字體怎樣加粗
Dreamweaver輸入的文本字體怎麼加粗?Dreamweaver中想要加粗輸入的文本,該怎麼加粗呢?這都是最基礎的教程,很簡單,需要的朋友可以參考下,下面就跟隨小編一起來看看吧!Dreamweaver怎麼給字體加粗,下面我們就來看看詳細的.教程。1、打開我的軟件2、文件新建一個3、新建...