資訊專欄INFORMATION COLUMN
摘要：圖片與文字對齊，圖標與標題對齊很多時候，在頁面中會遇到圖標與文字混排的情況，用并不能讓圖片完全對齊于文字。目的是達成這種效果這并不是用實現的先看一下用的樣子是設置在上的，此時雖然能湊合看，但并不完美。作為完美主義者是肯定受不了的。
img 圖片與文字對齊，圖標與標題對齊
很多時候，在頁面中會遇到圖標與文字混排的情況，用 vertical-algin: middle 并不能讓圖片完全對齊于文字。
目的是達成這種效果：（這并不是用 vertical-align 實現的）
先看一下用 vertical-align 的樣子vertical-align: middle 是設置在 img 上的，此時雖然能湊合看，但并不完美。作為完美主義者是肯定受不了的。
一種完美的解決方法html 結構是這樣的
BTC
scss （不了解 scss 的移步這里：scss 基礎用法）
.coin-title {
line-height: 1;
color: white;
margin-bottom: 8px;
> img {
float: left;
height: 1rem;
display: block;
}
> h5 {
font-size: 1rem;
padding-left: 20px;
}
&:after{ // clearfix
content: "";
clear: both;
display: block;
}
}
實現原理是這樣的， 與 同時包裹在 div 中
讓 和 都以 block 顯示
給 設置高度與 一致，此時
會自動等比例縮放到這個高度
讓 float: left，此時
就會脫離布局
給 設置 padding-left，并大于 的寬度，
就會出現在 的左邊，兩者重疊
最好在父元素 div 上添加一個 clearfix 抵消掉上面 float 產生的副效果
完美
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116108.html
摘要：是程序的主入口導包程序入口相當于主頁面可以看到，這個返回了一個的，作為程序的主界面。 什么是 Widget Flutter 的核心設計思想便是一切即 Widget，在 Flutter 的世界里，包括views、view、 controllers、layouts等在內的概念都建立在 Widget 之上，可以理解成原生的View。 lib/main.dart 是程序的主入口 //導包 impor...
閱讀目錄 一、head內常用標簽 二、 HTML語義化 三、 字符實體 四、 h系列標簽 五、 p標簽 六、 img標簽 七、 a標簽 八、 列表標簽 九、 table標簽 十、 form標簽 一、 head內常用標簽 1、meta相關 #1、指定字符集 #2、頁面描述 #3、關鍵字：有助于搜索引擎SEC優化，再怎么優化也抵不過競價排名 #4、3秒后跳轉 #5、三秒刷新 ...
摘要：標簽行內元素，表示一行中的一小段內容，沒有具體的語義。表示當前文件所在目錄下的上一級目錄，比如表示當前目錄下的上一級目錄下的文件夾中的的圖片。標簽表示列表的整體。1.html概述和基本結構 html概述 HTML是 HyperText Mark-up Language 的首字母簡寫，意思是超文本標記語言，超文本指的是超鏈接，標記指的是標簽，是一種用來制作網頁的語言，這種語言由一個個的標簽組成...
摘要：每個列表項始于標簽。由動作屬性定義的這個文件通常會對接收到的輸入數據進行相關的處理。標簽的屬性應當與相關元素的屬性相同。姓名性別姓名性別單元格標簽可以定義表格中的一個單元格，表示一個單元格。 第一部分 HTML 第一章 職業規劃和前景 職業方向規劃定位： web前端開發工程師 web網站架構師 自己創業 轉崗管理或其他 web前端開發的前景展望： 未來IT行業企業需求...
閱讀 2639·2021-11-22 15:24
閱讀 1370·2021-11-17 09:38
閱讀 2746·2021-10-09 09:57
閱讀 1192·2019-08-30 15:44
閱讀 2438·2019-08-30 14:00
閱讀 3538·2019-08-30 11:26
閱讀 2935·2019-08-29 16:28
閱讀 745·2019-08-29 13:56
