首頁 > web前端 > css教學 > 主體

css裡圖片和文字如何等高

藏色散人
發布: 2022-12-30 11:11:47
原創
3920 人瀏覽過

css裡設定圖片和文字等高的方法:1、新增css屬性「vertical-align:middle;」;2、將圖片和文字分別套上一個div,然後利用margin屬性實作圖片和文字等高效果即可。

css裡圖片和文字如何等高

本教學操作環境:windows7系統、css3版本、Dell G3電腦。

推薦:css影片教學

CSS 讓同一行的圖片和文字對齊

大家在做前端開發的時候那,常常會遇到img標籤和文字在同一行。

那麼我剛開始的時候那是利用的float浮動佈局解決的,定位佈局(兼容性需要調整不划算)下面給大家介紹一些其他的方法:

#1.添加CSS屬性:vertical-align:middle;

程式碼: 


这里是图片 这里是文字,看看文字对齐了没
登入後複製

設定各物件的vertical-align屬性,屬性說明: 

baseline-将支持valign特性的对象的内容与基线对齐 
sub-垂直对齐文本的下标 
super-垂直对齐文本的上标 
top-将支持valign特性的对象的内容与对象顶端对齐 
text-top-将支持valign特性的对象的文本与对象顶端对齐 
middle-将支持valign特性的对象的内容与对象中部对齐 
bottom-将支持valign特性的对象的文本与对象底端对齐 
text-bottom-将支持valign特性的对象的文本与对象顶端对齐
登入後複製

#2.div嵌套:將圖片和文字分別套上一個div,就可以利用margin 熟悉任意定位了

代碼:


这里是文字,看看文字对齐了没
登入後複製

3.把圖片當作背景:

如果你的圖片只是用來當小圖示放在文字的左側,那就推薦用這個方法,圖片設定成文字的背景,不循環,定位在左側上下居中,文字向左padding圖片的寬度加幾個像素。

程式碼: 


这里是文字,看看文字对齐了没
登入後複製

以上是css裡圖片和文字如何等高的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
css
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!