溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了CSS怎么實現文字與圖片同排和文字上下垂直居中的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇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>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怎么實現文字與圖片同排和文字上下垂直居中”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“CSS怎么實現文字與圖片同排和文字上下垂直居中”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
