1. 程式人生 > >vertical-align學習筆記

vertical-align學習筆記

vertical-align 支援的四種類型(支援inherit 繼承)


- 數值百分比類



vertical-align起作用的前提

vertical-align應用於inline水平和table-cell元素


- block不生效



- 間接改變元素屬性,vertical-align也會失效,如float,absoulate

  • table-cell(作用於自身)元素

vertical-align與line-height



vertical-align垂直居中


text-top和text-bottom

與父元素字型大小有關,不受行高以及其他內聯元素影響

vertical-align上標下標類

  1. html中的上標:<sup>類似於vertical-align:supper
  2. html中的下標:<sub>類似於vertical-align:sub

v-a前後元素不會直接影響,但是會通過改變父級影響前後元素

vertical-align的實際應用


  1. 小圖示文字對齊,相容性比較好
  2. 個數不定的文字內容和不定尺寸圖片垂直居中對齊




display:inline-block;具有收縮特性,由於這裡i標籤什麼內容都沒有,所以天然的寬度為0

相關推薦

vertical-align學習筆記

vertical-align 支援的四種類型(支援inherit 繼承) - 數值百分比類 vertical-align起作用的前提 vertical-align應

line-height && vertical-align 學習總結

內聯元素 num 非替換元素 ble pla play align 得到 一個 前言 line-height、font-size、vertical-align是設置行內元素布局的關鍵屬性。這三個屬性是相互依賴的關系,改變行間距離、設置垂直對齊等都需要它們的通力合作。 行

vertical-align筆記

vertical-align筆記 1.vertical-align作用 ① 控制單元格內容的垂直對齊方式。 ② 控制多個行內(塊)元素在一行上的垂直對齊方式 ③ 控制行內(塊)元素相對其父元素垂直對齊方式 注意: vertical-align 只對行內與行內塊元素、表格單元格元素生效:不

Robot Operating System (ROS)學習筆記4---語音控制

sla 語音 出現 tput http 學習 process 輸入 ubun 搭建環境:XMWare Ubuntu14.04 ROS(indigo) 轉載自古月居 轉載連接:http://www.guyuehome.com/260 一、語音識別包 1、安裝

MySQL學習筆記(六)—— MySQL自連接

概念 cor 子查詢 ron 表操作 例子 質量 _id order by 有的時候我們需要對同一表中的數據進行多次檢索,這個時候我們可以使用之前學習過的子查詢,先查詢出需要的數據,再進行一次檢索。 例如:一張products表,有產品id,供應商id(vend_

jquery 深入學習筆記之中的一個 (事件綁定)

color 動態 name his pan mouseover this pre con 【jquery 事件綁定】 1、加入元素事件綁定 (1) 加入事件為當前元素 $(‘p‘).on(‘click‘,function(){ //code here ..

AngularJS入門學習筆記

rect directive 技術分享 attr 兩個 ava 內容 module 大括號 首先聲明: 本博客源自於學習:跟我學AngularJs:AngularJs入門及第一個實例。通過學習,我自己的一些學習筆記。 1.AngularJS的一些基本特性 (1)使用雙大括號

Python學習筆記-2017.5.4

列表 lin 覆蓋範圍 復習 處理 pytho 內部 global txt 本文章記錄學習過程中的細節和心得: 復習所學課程: 1、文件的操作:   打開文件,對文件的操作打開方式有兩種:   第一種:      f = open("test.txt", "r")#以只讀

SAS學習筆記之函數應用

不能 oracle 理解 資料 oracl 函數應用 特殊 put acl 今天在做數據需求的時候遇到一些問題,因為不能夠在數據庫裏面做,僅僅好在SAS裏面實現。這就遇到了一些麻煩,須要使用一些函數實現部分功能,如查找字段中某個特殊字符出現的次數,查找某個字符的位置等,

OpenCV2學習筆記(十五):利用Cmake高速查找OpenCV函數源代碼

one 生成 img log 分享 lan 學習筆記 全部 modules 在使用OpenCV時,在對一個函數的調用不是非常了解的情況下,通常希望查到該函數的官方聲明。而假設想進一步研究OpenCV的函數,則必須深入到源碼。在VS中我們能夠選中想要查

avalonjs 學習筆記1---checkbox

nod item ack lex server ini npm 學習 define 一、vscode 安裝使用 1.vs code+node.js下載安裝 2.在node.js command prompt 中運行 npm install -g live-server 3

Linux學習筆記(三):系統執行級與執行級的切換

查看 用戶操作 回車 water hat ntsysv tde 文件表 config 1.Linux系統與其它的操作系統不同,它設有執行級別。該執行級指定操作系統所處的狀態。Linux系統在不論什麽時候都執行於某個執行級上,且在不同的執行級上執行的程序和服務都不同,所要

Principle of Computing (Python)學習筆記(7) DFS Search + Tic Tac Toe use MiniMax Stratedy

ide out generate depth sku color ati cond with 1. Trees Tree is a recursive structure. 1.1 math nodes https://class.coursera.org/prin

Java程序猿的JavaScript學習筆記(12——jQuery-擴展選擇器)

type write number article mat 我們 content ace val 計劃按例如以下順序完畢這篇筆記: Java程序猿的JavaScript學習筆記(1——理念) Java程序猿的JavaScript學習筆記(2——屬性復制和繼承) Jav

java學習筆記——String類

通過 ray [] 原理 log spl 2.3 -s 長度 一、概述 ·字符串是一個特殊的對象 ·字符串一旦初始化就不可以被改變 ·String str = "abc"; ·String str1 = new String("abc"); 有什麽區別? package

java學習筆記——java中對象的創建,初始化,引用的解析

初始 學習筆記 style article 學習 base 表達 如果 bsp 如果有一個A類。 1、例如以下表達式: A a1 = new A(); 那麽A是類,a1是引用。new A()是對象。僅僅是a1這個引用指向了new A()這個對象。 2、又如: A

構建之法 學習筆記04

部分 使用 用戶 != 工作 應該 覆蓋率 錯誤處理 必須 關於軟件工程的一些基本概念和技術 單元測試 絕大部分軟件都是由多人合作完成的,大家的工作互相有依賴關系。最典型的的例子就是,某人負責的模板的功能被其他人調用。軟件的額很多錯誤都是來源於程序員對模塊功能的誤解、疏忽或

cocos2d-x學習筆記(c++與lua交互回調函數的處理)

回調函數 tolua++ cocos2dx lua 本文假設讀者已經會使用tolua++進行C++與lua之間的通訊1、在頭文件中定義註冊回調函數,定義在MyClass類中void register(unsigned short cmdID, LUA_FUNCTION func);//LUA_

python框架之 Tornado 學習筆記(一)

tornado pythontornado 一個簡單的服務器的例子:首先,我們需要安裝 tornado ,安裝比較簡單: pip install tornado 測試安裝是否成功,可以打開python 終端,輸入: import tornado.https

Java學習筆記--鏈表

引用變量 nts mage 集合 tran 分享 isp exce pub 心在山東身在吳,飄蓬江海漫嗟籲。 他時若遂淩雲誌, 敢笑黃巢不丈夫。                ——水滸傳 先上源代碼,LinkedList類: 1 private static class