正文

css:图标与文字对齐的两种方法

秦佳奇  2022-02-11  366

关键词：

（好久没写博客了，这几个月的积累比较零碎，记在本子上，现在开始整理归类）

在平时写页面的过程中，常遇到要把小图标与文字对齐的情况。比如：

技术分享

总结了两种方法，代码量都比较少。

第一种

　　　　对img设置竖直方向对齐为middle，

<div>
        <img src=""  class="heart">
        <span>1169</span>
        <img src=""  class="comment">
        <span>1168</span>
</div>

div{
     height:30px;
     line-hight:30px;
}
.heart,.comment{
        vertical-align:middle;
}

第二种

　　　　把小图标设为背景图片，调整padding

<div>
        <span class="heart">1169</span>
        <span class="comment">1168</span>
</div>

.hear{
        background:url(images/heart.png) left center no-repeat;
        margin-right:20px;
}
.comment{
        background:url(images/comment.png) left center no-repeat;
}
.hear,.comment{
        height:30px;
        line-height:30px;
        padding-left:20px;
}

css图标文字不对齐

页面排版经常遇到‘图标+文字’的需求，正常样式写下来是这样?，但产品要的应该是长这样?，怎么办呢？其实很简单，加个样式看看vertical-align:middle;浏览器都支持，当然后面的值是上对齐，下对齐，还是居中就要你自己去发... 查看详情

图片与文字居中对齐css

图片与文字居中对齐css*方法1.给图片和文字元素都设置：`vertival-align:center`*示例1.HTML```html<h3><svgfill="none"stroke="currentColor"stroke-linecap="round"stroke-linejoin="round&quo 查看详情

怎么用div+css把图片中的图标和文字对齐

css最近使用的两种图标字体库

##0.前言比较基础的图标加载：<imgsrc="x.png">和块元素的背景background:url(./x.png).页面多图标时，使用雪碧图（多个png压缩成一个png，定位来使用），减少图片所占空间。大屏显示，为保证图标清晰度，可以使用svg格式的图片。s... 查看详情

vue添加icon图标的两种方法

方法一、方法二、参考链接：https://blog.csdn.net/woaizhuzhuxia521521/article/details/85234779 查看详情

css如何设置ul的列表图标和列表文字对齐

...将li的height和line-height设置成为和设计稿一样的2、将列表图标整体切出来，铺在ul上，不平铺3、使用background-position控制ul背景和li中的文字对齐即可。。。参考技术A通常的方法是用list-style-type但是那个很丑陋，而且无法控制，现... 查看详情

实现icon和文字垂直居中的两种方法－（vertical-alignandline-height）

方法一：vertical-align在w3school定义：该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐百思不得骑姐然后Google，反正在w3schools上面并没有找到定义仅仅能写代码測试而后个人理解，才作出如此解释》该属性作用的... 查看详情

qt中设置按钮图片和文字的两种方法(代码片段)

...;text)该方法使用了自带的函数设置，缺点是无法自由调整图标和文字之间的间距2.使用Qlabel和布局嵌入在自带的QpushButton中QLabel*label=newQLabel();QLabel*label2=newQLabel();label2->setStyleSheet(QString("border:1pxsolidred;"));label->setStyleSheet(QString(... 查看详情

css控制图片与文字对齐

文字旁边搭配图片时，发现图片比文字靠上，原来默认的情况是图片顶对齐而文字底对齐，通过设置css属性可以使得图片与文字对齐。设置各对象的vertical-align属性，属性说明：baseline－将支持valign特性的对象的内容与基线对齐su... 查看详情

将文本基线与 CSS 中的按钮对齐

】将文本基线与CSS中的按钮对齐【英文标题】：AligntextbaselinewithabuttoninCSS【发布时间】：2011-11-0917:57:01【问题描述】：我想实现此图像上显示的两种对齐方式之一：。如果CSS3能让事情变得更简单，那么CSS3还可以，甚至更好。我... 查看详情

自制按钮图标的两种方法：imagesprite和svg字体文件

...体文件iconmoon是一个在线工具，可以上传自己的SVG格式的图标文件，也可以从其中选择已有的图标，定制出自己的字体文件。下载的结果包括了字体文件和一个简单的demo.html, （https://icomoon.io/app/#/se 查看详情

shell中逻辑与的两种表示方法

bash中表示逻辑与的两种方法：（1）[$state=="running"-a$name=="zone1"]（2）[[$state=="running"&&$name=="zone1"]]ksh中支持第二种。实例：#!/bin/bashread-p"peleaseinputyourname:"nameread-p"pleaaseinputyourpassword:"passwdif 查看详情

word将文字设置垂直居中的方法

...是把鼠标置于需要居中的表格内,然后单击“居中”图标按钮,一般都可以达到要求的居中效果,但如果表格内容不够对称怎么办?下面我马上就告诉大家Word2013表格文字居中的方法。　　Word2013表格文字怎么垂直居中的步骤：... 查看详情

纯css实现文字一行居中，多行左对齐的方法

...显示产品的名称。　　想要实现的效果为：　　　　未知文字长度，当文字长度小于盒子宽度，也就是一行时，文字居中。　　　　当文字长度大于盒子的宽度，会自动换行，成为多行文字，此时文字左对齐。1、利用行内元素... 查看详情

checkbox/input文本框与文字对齐

3种方法都能实现checkbox文本框或radio文本框与文字对齐：<metacharset="utf-8"><inputstyle="vertical-align:top"type="checkbox"/><labelstyle="vertical-align:top">使用css对齐</label><br/><inputtype 查看详情

android文字自动滚动（跑马灯）效果的两种实现方法[特别好使]

有时候在xml中写的跑马灯效果不滚动：原因有以下 Android系统中TextView实现跑马灯效果，必须具备以下几个条件：1、android:ellipsize=”marquee”2、TextView必须单行显示，即内容必须超出TextView大小3、TextView要获得焦点才能滚... 查看详情

css引入的两种方法link和@import的区别和用法

link和@import都是HTML中引入CSS的语法单词。两者的基本语法link语法结构<linkhref="外部CSS文件的URL路径"rel="stylesheet"type="text/css"/>link标签通过URL路径引入外部的CSS文件到HTML中。@import语法结构<styletype="text/css">@import+空格+url(外... 查看详情

[css]复选框单选框与文字对齐问题的研究与解决.

...文,在这里转载过来学习下. 原文地址:复选框单选框与文字对齐问题的研究与解决.目前中文网站上面的文字，就我的个人感觉而言，绝大多数网站的主流文字大小为12px，因为在目前高分辨率显示器屏幕下，11px的汉字，其像素... 查看详情