<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="/main.xsl"?>
<b:blog xmlns="http://www.w3.org/1999/xhtml" xmlns:b="http://blog.othree.net"  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://blog.othree.net http://blog.othree.net/blooog.xsd">
	<b:blogTitle>O3noBLOG</b:blogTitle>
	<b:blogDescription></b:blogDescription>
	<b:entries>
		<b:entriesMeta>
			<b:listType>s</b:listType>
			<b:listData listID="000209" baseName="vertical-align-is-not-valign">vertical-align不是valign</b:listData>

			<b:previous>
				<b:mTitle>Firefox的一個Bug</b:mTitle>
				<b:mDate>2005/07/22</b:mDate>
				<b:mBase>a-bug-in-fx</b:mBase>
			</b:previous>


			<b:next>
				<b:mTitle>背景圖的正確位置</b:mTitle>
				<b:mDate>2005/07/23</b:mDate>
				<b:mBase>correct-position-of-background-image</b:mBase>
			</b:next>

		</b:entriesMeta>
		<b:entry entryID="000209" baseName="vertical-align-is-not-valign">
			<b:author>
				<b:authorName>othree</b:authorName>
				<b:authorEmail>othree@gmail.com</b:authorEmail>
				<b:authorUrl></b:authorUrl>
			</b:author>
			<b:datetime>
				<b:date>2005-07-23</b:date>
				<b:time>02:01:19</b:time>
			</b:datetime>
			<b:category>css-html</b:category>

			<b:CommentsAccepted>1</b:CommentsAccepted>



			<b:PingsAccepted>1</b:PingsAccepted>


			<b:title>vertical-align不是valign</b:title>
			<b:content>
				<b:summary>我想這是學習CSS中最容易搞錯的東西之一，CSS的vertical-align屬性和TH、TD標籤valign屬性是不一樣的兩個東西，valign就是物件內的東西的垂直位置，不過vertical-align不是，事實上他是用在inline物件上的，用來決定一個inline物件的垂直位置（例如：上標、下標），通常是用不太到，比較容易看到影響的是img標籤，img標籤如果沒用CSS指定的話預設就是inline的物件。我找到一個範例很清楚的教學網頁，雖然是日文的，不過光看範例的部分應該沒問題。另外還有一個英文的簡單範例。 那要怎麼讓物件垂直置中呢？如果只是單行文字要置中還簡單，只要讓line-height等於外層物件的height就可以了（舊瀏覽器有些不支援，ex: IE5/Mac），如果是block物件要置中那就麻煩了，比較土法煉鋼的方法是靠外層的padding，要準確一點的話一定會需要增加標籤數，而且很trick，就不介紹了（其實是範例找不到了@_@）。...</b:summary>
				<b:mainContent><p>我想這是學習CSS中最容易搞錯的東西之一，CSS的<strong>vertical-align</strong>屬性和TH、TD標籤<strong>valign</strong>屬性是不一樣的兩個東西，valign就是物件內的東西的垂直位置，不過vertical-align不是，事實上他是用在inline物件上的，用來決定一個inline物件的垂直位置（例如：上標、下標），通常是用不太到，比較容易看到影響的是img標籤，img標籤如果沒用CSS指定的話預設就是inline的物件。我找到一個範例很清楚的<a href="http://www.htmq.com/style/vertical-align.shtml">教學網頁</a>，雖然是日文的，不過光看範例的部分應該沒問題。另外還有一個英文的<a href="http://www.utoronto.ca/ian/books/style/chap4/fig4-15.html">簡單範例</a>。</p>

<p>那要怎麼讓物件垂直置中呢？如果只是單行文字要置中還簡單，只要讓line-height等於外層物件的height就可以了（舊瀏覽器有些不支援，ex: <span class="caps">IE5</span>/Mac），如果是block物件要置中那就麻煩了，比較土法煉鋼的方法是靠外層的padding，要準確一點的話一定會需要增加標籤數，而且很trick，就不介紹了（其實是範例找不到了@_@）。</p></b:mainContent>
				<b:extendContent></b:extendContent>
			</b:content>
			<b:comments commentCount="2">

				<b:comment commentID="000885" entryID="000209">
					<b:author>
						<b:authorName>Neo</b:authorName>
						<b:authorEmail>neo@neo.com.tw</b:authorEmail>
						<b:authorUrl>http://www.neo.com.tw</b:authorUrl>
					</b:author>
					<b:datetime>
						<b:date>2005-10-17</b:date>
						<b:time>01:56:57</b:time>
					</b:datetime>
					<b:content>
						<b:mainContent><p>正好在看這方面的資訊，對我很有幫助，感謝感謝! ^^</p></b:mainContent>
					</b:content>
				</b:comment>

				<b:comment commentID="000982" entryID="000209">
					<b:author>
						<b:authorName>ch3128</b:authorName>
						<b:authorEmail>ch3128@asia.com</b:authorEmail>
						<b:authorUrl>http://blog.yam.com/ch3128</b:authorUrl>
					</b:author>
					<b:datetime>
						<b:date>2006-03-13</b:date>
						<b:time>11:58:08</b:time>
					</b:datetime>
					<b:content>
						<b:mainContent><p>Hi, 正在煩惱 vertical-align 跟 valign 兩者該如何取捨, 剛好看到您的文章, 非常有幫助. 有機會多交流囉!</p></b:mainContent>
					</b:content>
				</b:comment>

			</b:comments>
			<b:trackbacks trackbackCount="1" trackbackURL="http://othree.net/mt/mt-tb.cgi/208">

				<b:trackback trackbackID="12" entryID="000209">
					<b:pingTitle>[CSS] 區塊內文字垂直置中的方式 (單行)</b:pingTitle>
					<b:datetime>
						<b:date>2005-10-17</b:date>
						<b:time>02:23:27</b:time>
					</b:datetime>
					<b:pingBlogName>Neo's Blog</b:pingBlogName>
					<b:pingURL>http://www.neo.com.tw/archives/000760.html</b:pingURL>
					<b:pingExcerpt>先看看未置中的樣式: (由於未置中的緣故，多個區塊還會產生接合不完全的狀況)...</b:pingExcerpt>
				</b:trackback>

			</b:trackbacks>
		</b:entry>
	</b:entries>
</b:blog>