第十三章圖片的對齊

時間 2019-11-12

標籤第十三圖片對齊简体版

原文原文鏈接

CSS設置圖片對齊方式css

一、橫向對齊方式html

圖片水平對齊的方式與文字水平對齊的方式基本相同，分爲左、中、右3種。ui

不一樣的是圖片的對齊方式一般不能直接經過設置圖片的text-align屬性，而是經過設置其父元素的該屬性來實現的。spa

<html>
<head>
<title>水平對齊</title>
</head>
<body>
<table width="100%" border="1">
<tr><td style="text-align:left;"><img src="building.jpg" /></td></tr>
<tr><td style="text-align:center;"><img src="building.jpg" /></td></tr>
<tr><td style="text-align:right;"><img src="building.jpg" /></td></tr>
</table>
</body>
</html>

二、縱向對齊方式code

圖片豎直方向上的對齊方式主要體如今與文字搭配的狀況下，尤爲當圖片的高度與文字自己不一致時。htm

在CSS中一樣是經過vertical-align屬性來實現各類效果的。blog

當vertical-align的值爲baseline時，兩幅圖片的下端都落在文字的基線上，即若是給文字添加了下劃線，就是下劃線的位置。對於其餘的值，都能從顯示結果和值自己的名稱直觀地獲得結果。圖片

圖片的豎直對齊也能夠用具體的數值來調整，正數和負數均可以使用。it

<html>
<head>
<title>豎直對齊  包含具體數值</title>
<style type="text/css">
<!--
p{
font-size:15px;
}
img{
border:1px solid #000055;
}
-->
</style>
</head>
<body>
<p>豎直對齊<img src="file:///F|/0-css+div/書中實例/第4章/donkey.jpg"  style="vertical-align:baseline;" />方式：baseline<img src="file:///F|/0-css+div/書中實例/第4章/miki.jpg" style="vertical-align:baseline" />方式</p>
<p>豎直對齊<img src="file:///F|/0-css+div/書中實例/第4章/donkey.jpg"  style="vertical-align:bottom;" />方式：bottom<img src="file:///F|/0-css+div/書中實例/第4章/miki.jpg" style="vertical-align:bottom" />方式</p>
<p>豎直對齊<img src="file:///F|/0-css+div/書中實例/第4章/donkey.jpg"  style="vertical-align:middle;" />方式：middle<img src="file:///F|/0-css+div/書中實例/第4章/miki.jpg" style="vertical-align:middle" />方式</p>
<p>豎直對齊<img src="file:///F|/0-css+div/書中實例/第4章/donkey.jpg"  style="vertical-align:top;" />方式：top<img src="file:///F|/0-css+div/書中實例/第4章/miki.jpg" style="vertical-align:top" />方式</p>
<p>豎直對齊<img src="file:///F|/0-css+div/書中實例/第4章/donkey.jpg"  style="vertical-align:sub;" />方式：sub<img src="file:///F|/0-css+div/書中實例/第4章/miki.jpg" style="vertical-align:sub" />方式</p>
<p>豎直對齊<img src="file:///F|/0-css+div/書中實例/第4章/donkey.jpg"  style="vertical-align:super;" />方式：super<img src="file:///F|/0-css+div/書中實例/第4章/miki.jpg" style="vertical-align:super" />方式</p>
<p>豎直對齊<img src="file:///F|/0-css+div/書中實例/第4章/donkey.jpg"  style="vertical-align:text-bottom;" />方式：text-bottom<img src="file:///F|/0-css+div/書中實例/第4章/miki.jpg" style="vertical-align:text-bottom" />方式</p>
<p>豎直對齊<img src="file:///F|/0-css+div/書中實例/第4章/donkey.jpg"  style="vertical-align:text-top;" />方式：text-top<img src="file:///F|/0-css+div/書中實例/第4章/miki.jpg" style="vertical-align:text-top" />方式</p>


<p>豎直對齊<img src="donkey.jpg" style="vertical-align:5px;">方式：5px</p>
<p>豎直對齊<img src="miki.jpg" style="vertical-align:-10px;">方式：-10px</p>

</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

第十三章 圖片的對齊

第十三章圖片的對齊