溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

DIV+CSS怎么實(shí)現(xiàn)文字與圖片上下垂直居中

發(fā)布時(shí)間：2022-01-20 09:30:31 來源：億速云 閱讀：253 作者：iii 欄目：web開發(fā)

這篇文章主要介紹了DIV+CSS怎么實(shí)現(xiàn)文字與圖片上下垂直居中的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇DIV+CSS怎么實(shí)現(xiàn)文字與圖片上下垂直居中文章都會(huì)有所收獲，下面我們一起來看看吧。

DIV+CSS實(shí)例代碼如下：

  1.  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  3. <html xmlns="http://www.w3.org/1999/xhtml"> 
  4. <head> 
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  6. <title>DIV+CSS實(shí)例講解測(cè)試</title> 
  7. <style type="text/css"> 
  8. body{ font-size:12px;} 
  9. </style> 
  10. </head> 
  11. <body> 
  12. <img src="http://www.億速云.com/images/億速云.jpg"
     alt="我是高度為37的DIVCSS5圖片" />DIVCSS5測(cè)試文字CSS 
  13. </body> 
  14. </html>  

說明首先我們?cè)O(shè)置此網(wǎng)頁body內(nèi)文字css樣式為12px。然后在html引入圖片(擴(kuò)展：CSS引入-CSS引用)及在圖片后跟幾個(gè)測(cè)試文字。

設(shè)置css使文字和圖片同排同行時(shí)候上下垂直居中
我們只需要在CSS樣式，加入CSS代碼如下：
img{ vertical-align:middle;}
加入以上對(duì)圖片設(shè)置上下居中CSS樣式即可讓在同排文字和圖片垂直居中。

完整DIV+CSS代碼如下：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  3. <html xmlns="http://www.w3.org/1999/xhtml"> 
  4. <head> 
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  6. <title>CSS實(shí)例講解測(cè)試</title> 
  7. <style type="text/css"> 
  8. body{ font-size:12px;} 
  9. img{ vertical-align:middle;} 
  10. </style> 
  11. </head> 
  12. <body> 
  13. <img src="http://www.億速云.com/images/億速云.jpg"
     alt="我是高度為37的DIVCSS5圖片" />DIVCSS5測(cè)試文字 
  14. </body> 
  15. </html> 

關(guān)于“DIV+CSS怎么實(shí)現(xiàn)文字與圖片上下垂直居中”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“DIV+CSS怎么實(shí)現(xiàn)文字與圖片上下垂直居中”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手