溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“CSS布局文字與圖片同排的方法”，在日常操作中，相信很多人在CSS布局文字與圖片同排的方法問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”CSS布局文字與圖片同排的方法”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
未設置裝備擺設翰墨與圖片在同排同行時辰高下垂直居中時，CSS實例圖片下列:
闡明：
以上“css5.com.cn”為CSS5網網址圖片，后頭跟著是筆墨段，可見盡管圖片與筆墨在偕行，可是筆墨未凹凸垂直居中，顯然圖片垂直居上，筆墨垂直居下。
DIV+CSS實例代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>DIV+CSS實例教學測試</title><style type="text/css">body{ font-size:12px;} </style></head><body><img src="//www.css5.com.cn/images/CSS5.jpg" alt="我是高度為37的CSS5圖片" />CSS5測試文字CSS </body></html>闡明起首咱們配置此網頁body內文字css技倆為12px。而后在html引入圖片(縮減：CSS引入-CSS引用)及在圖片后跟幾個測試筆墨。 你或是拷貝以上代碼新建成html網頁，再到涉獵器中涉獵此新建的網頁，到底將如上圖。
設置css使翰墨與圖片同排同業時辰高下垂直居中 我們只緊要在CSS花色，參預CSS代碼如下： img{ vertical-align:middle;} 加入以上對圖片配置凹凸居中CSS格式便可讓在同排文字和圖片垂直居中。
殘缺DIV+CSS代碼下列：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>CSS實例教授教養測試</title><style type="text/css">body{ font-size:12px;} img{ vertical-align:middle;} </style></head><body><img src="//www.css5.com.cn/images/CSS5.jpg" alt="我是高度為37的CSS5圖片" />CSS5測試文字 </body></html>此網頁在閱讀器中瀏覽格局圖：
我們或者考察上圖或本身輕松親積極手拷貝以上殘破css代碼和html源代碼(源代碼)便可實現與掌握css高低垂直居中才略。
DIV CSS皺褶與進步 假如咱們配置".yangshi"的高度與line-height，要想此DIV中模式垂直居中一樣咱們配置vertical-align:middle就可，CSS代碼如下： .yangshi img{vertical-align:middle;} 這里值得說亮的是高度與line-height未必要大于圖片高度，不然也會涌現“CSS HACK”在不同涉獵器中不兼容情況。
到此，關于“CSS布局文字與圖片同排的方法”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
