2. 程式人生 > >html佈局之 圖示文字混排

html佈局之 圖示文字混排

阿新 • • 發佈：2019-02-20

  摘要：做html佈局的時候經常用到圖示和文字的混排，使用的時候經常要調很長時間，今天來總結一下。

直接上程式碼：

<!doctype html>
<html class="no-js">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>小徽章</title>
 

    <link rel="stylesheet" href="../assets/css/amazeui.css">
    <style>
        #p {
            background-color: blue;
            width: 80%;
            margin: 0 auto;
            text-align: center;
            padding: 0.2em 0 0.5em 0;
            border-radius: 0.5em;
        }
        #p
 
>img {
            display: inline-block;
            height: 1.2em;
        }
        #p>span {
            line-height: 1;
            color: #fff;
        }
    </style>
</head>
<body>
<p id="p">
    <img src="static/img/lock.png" alt="no">
    <span class="am-text-bottom"
 
>點選分享到朋友圈開始預約</span>
</p>
<script type="text/javascript" src="../assets/js/jquery.min.js"></script>
<script type="text/javascript" src="../assets/js/amazeui.js"></script>
</body>
</html>

效果如下：
效果

說明：

  • 給文字新增 am-text-bottom 類，使圖片底部和文字底部對其（注意這裡是和文字行高的底部）；
  • 根據第一條，所以要設定文字的行高為1，即文字行高的一倍，這樣圖片就和文字底部是對齊的；
  • 設定圖片的高度到合適位置；
  • 設定容器的內padding，使上下背景色協調；
  • OK



<完>

相關推薦

html佈局之 圖示文字混排

  摘要：做html佈局的時候經常用到圖示和文字的混排，使用的時候經常要調很長時間，今天來總結一下。 直接上程式碼： <!doctype html> <html class="

ReactNative系列之十九表情emoji與文字混排的兩種方案實現

方案一：使用react-native-emoji這個庫優點：文字和圖片混排單行多行，居中顯示都正常缺點：依賴手機的環境，只能根據系統裡的表情進行顯示？不能自定義表情。。。emoji...這種方案基本不可行，使用者體驗差方案二：<Text>    <Text&

checkbox與文字混排無法對齊到一行的解決辦法

內容 cal 無法 inpu div 解決 一行 name align 直接上代碼： <span><input style="vertical-align:middle" type="checkbox" name="checkbox" /><

iOS 上利用 fallback 機制為不同語言的文字 (script) 設定字型，從而使得文字混排更為優雅

如果您是一位 WEB 開發者，相信您對 CSS 的 font-family 屬性一定不會陌生。通常我們會為 font-family 屬性設定一長串的字型(家族)列表，就像這樣的： .text { font-family: Menlo, Monaco, Consolas, "Courier

WPF仿QQ聊天框表情文字混排實現

二話不說。先上圖 圖中分別有檔案、文字+表情、純文字的展示，對於同一個list不同的展示形式，很明顯，應該用多個DataTemplate，那麼也就需要DataTemplateSelector了： class MessageDataTemplateSe

android實現gif圖與文字混排

public class AnimatedImageSpan extends DynamicDrawableSpan { private Drawable mDrawable; public AnimatedImageSpan(Drawable d) { super();

editText裡面圖和文字混排並編輯以後存裡面的文字和圖片資訊等

package com.liu.demo; import android.app.Activity; import android.content.Context; import android.graphics.Bitmap; import android.graphics.Bitmap.Config; i

Unity外掛之NGUI學習（5）—— 建立Label圖文混排及文字點選

建立一個新的Scene，並按 Unity外掛之NGUI學習（2）建立UI Root。 準備工作，製作Font，現在Project視窗建立一個Font資料夾，然後從系統自帶字型資料夾中選擇自己需要的字型，我選擇了黑體，然後拖到Font資料夾中去。選擇剛匯入的字型。 Font

CSS佈局之圖文混排，影象簽名，多圖拼接和圖片特效

    <divid="text">       高圓圓，中國女演員，1979年10月5日出生於北京市豐臺區雲崗一個普通的知識分子家庭。1996年高圓圓被廣告公司發掘，隨後拍攝了大量廣告，成為了廣告圈中的模特。1997年高圓圓出演了她的第一部電影《愛情麻辣燙》，從此開始了她的演員生涯。2001年高

android TextView 載入html 顯示圖片並且新增img標籤點選事件工具類 富文字 圖文混排 圖片大小調整

注意，本人部落格主要是為了自己記錄，如果有問題歡迎反饋哈。 android的TextView可以載入html程式碼，並且識別他們的標籤，用的方法就是setText(Html.fromHtml(source)),其中source是指定的字串，包含html標籤,用setText

[寒江孤葉丶的Cocos2d-x之旅_33]RichTextEx一款通過HTML標簽控制文字樣式的富文本控件

ast number blink js版本號 領取 size 創建 sub require RichTextEx一款通過HTML標簽控制文字樣式的富文本控件 原創文章，歡迎轉載。轉載請註明：文章來自[寒江孤葉丶的Cocos2d-x之旅系列] 博客地址

coreText 圖文混排之圖片拖動

1.圖文混排編輯，圖片可拖動，看動態圖 ： 2.看程式碼： .h檔案 // //  ViewController.h //  textView // //  Created by yupeng xia on 16/9/

Android RecyclerView 多佈局與混排

多佈局   關於RecyclerView的基本用法參考下面三篇部落格：  Android RecyclerView之代替ListView與GridView  Android RecyclerView之新增Item分割線  Android RecyclerView 的瀑布流式

css之讓文字排在圖片的右邊的中心位置

                效果截圖如下:html程式碼如下:<dl>            <dt>領導、老師</dt>            <dd><img src="images/tx1.jpg" width="100" height="100

iOS開發之Swift標籤欄按鈕UITabBarItem樣式修改（圖示文字尺寸，顏色等）

import UIKit   class MainTabViewController:UITabBarController {     override func viewDidLoad()     {         super.viewDidLoad()         // 一共包含了兩個檢視     

RichEditeText——android圖文混排富文字文章編輯器實現詳解

需求：android 實現富文字編輯器，並且實現html解析和生成。 功能點： 字型加粗，斜體，下劃線，刪除線 字型設定大小   預設大（18px），中（16px）,小（14px） 字型設定顏色 換行插入圖片 編輯內容生成html 解析html並且顯示 主要實現

thymeleaf模板佈局之引入其他html片段（類似jsp:include功能）

在jsp中，一般使用jsp:include:xxx.jsp來實現這個功能，那在thymeleaf裡怎麼做呢先說把所有html檔案都引入進來的方法：我把導航欄的html片段單獨提了出來，如果想全部引用它，就在想引用的那個頁面寫一個div，然後加上th:replace標籤<

Android 混排效果之 ScrollView 巢狀 RecyclerView 巢狀gridview 實現listview 巢狀gridview 效果

RecyclerView 出現以後 很受大家歡迎 漂亮流暢的列表 簡單的操作 可以幫我們完成很多的列表 但是有一種listview 巢狀gridview 的效果 目前還是需要巢狀才能完成 現在就簡單說一下我的思路 本人的需求是例如手機淘寶頁 本人使用老套的實現模

HTML頁面佈局之flex彈性盒子

這裡是修真院前端小課堂，每篇分享文從 【背景介紹】【知識剖析】【常見問題】【解決方案】【編碼實戰】【擴充套件思考】【更多討論】【參考文獻】 八個方面深度解析前端知識/技能，本篇分享的是： 【HTML頁面佈局之flex彈性盒子 】 一、背景介紹 Flexbox 佈局(FLexi

android 解析html 圖文混排

public class MyImageGetter implements Html.ImageGetter { WeakReference<TextView> mTextViewReference; Context mContext; public MyIm