～relax～
這是一個悠閒放鬆的部落格，請用輕鬆的心情閱讀文章，在忙碌工作之餘療癒自己的身心。 (最近發現我的文章被複製轉貼且沒有註明出處，本部落格的文章皆為原創，若有引用參考也會註明，如有需求請留言告知，謝謝！)

目前分類：CSS／HTML (5)

瀏覽方式： 標題列表 簡短摘要

當我們寫文章夾雜圖片時，一般都是像這樣，圖片會高過文字很多：

文字與圖片對齊方式示範圖片

 

但有時會希望文字與圖片是在同一條水平線上，如下：（應該稱為垂直置中對齊嗎？）

文字與圖片對齊方式示範圖片
(繼續閱讀...)
文章標籤
css

伊 發表在 痞客邦 留言(0) 人氣()

▲top
table
{
position:relative; 
margin-left:auto; 
margin-right:auto; 
width:auto;
}
很簡單吧~^^~
position 跟 width 的值請自行替換，
margin 左跟右用 auto 是為了讓它置中，
想要不對稱的話，把 width 拿掉再調左右就好。

(繼續閱讀...)

伊 發表在 痞客邦 留言(0) 人氣()

▲top

本篇文章重新編排，請觀看 更好閱讀 及 理解 的新版：文字圖片對齊同一水平線(垂直置中vertical-align:middle)

程式碼：

<div>文字與圖片對齊方式<span style="vertical-align:middle;"><img src="#"></span></div>

<div>文字與圖片對齊方式<span style="vertical-align:baseline"><img src="#"></span></div>

<div>文字與圖片對齊方式<img src="#"></div>

<div>文字與圖片對齊方式<span style="vertical-align:bottom"><img src="#"></span></div>

<div>文字與圖片對齊方式<span style="vertical-align:sub"><img src="#"></span></div>

<div>文字與圖片對齊方式<span style="vertical-align:super"><img src="#"></span></div>

<div>文字與圖片對齊方式<span style="vertical-align:text-bottom"><img src="#"></span></div>

<div>文字與圖片對齊方式<span style="vertical-align:text-top"><img src="#"></span></div>

<div>文字與圖片對齊方式<span style="vertical-align:top"><img src="#"></span></div>

伊 發表在 痞客邦 留言(0) 人氣()

▲top

相當於html的  <td nowrap="true">

CSS的nowarp屬性  white-space: nowrap;


伊 發表在 痞客邦 留言(0) 人氣()

▲top

HTML DOM 中文說明網頁：
https://www.w3school.com.cn/js/js_htmldom.asp
簡體網站，內容蠻多的，有參考價值，對於英文感冒的人應該很好用。

HTML DOM 英文說明網頁：
https://www.w3schools.com/js/js_htmldom.asp

(繼續閱讀...)

伊 發表在 痞客邦 留言(0) 人氣()

▲top