不同大小的字体底部对齐

最新推荐文章于 2024-04-24 20:38:59 发布
转载 最新推荐文章于 2024-04-24 20:38:59 发布 · 5.2k 阅读 · 1
文章标签：

#html #css #文字

不同font-size的字体会出现上下偏差，这是一个蛮令人头疼的问题。特别是中文字体(英文字体不会出现这种问题)。

1

2

3

4

5

6

7

8

9

<style>

    b {  font-size:24px; }

    span {  font-size:50px; }

</style>

 

<body>

<div><b>Hello<span>World</span></b></div>

<div><b>Hello<span>578</span></b></div>

<div><b>爆款<span>578</span></b></div>

1

<div><b>爆款<span>价格</span></b></div>

1

</body>

 下面是分别出现的三种情况：

英文字体还好，可中文出现了上下偏差。设置行高也不起作用。现在推荐下面这个方法来处理。

1

2

3

4

5

6

7

8

9

<style>

b { position:absolute; font-size:24px; }

span { position:absolute; font-size:50px; top:-25px;  }

 

</style>

<body>

//这里注意<span>标签是放在<b>标签里面

<div><b>爆款<span>578</span></b></div>

</body>

 

这里通过绝对定位来使文字偏移回来。只需要控制span标签的top值，就可以让文字底部对齐。

iOS UILabel 不同字体大小，文字垂直居中对齐
fengquanwang 的专栏
01-09 4548
代码如下： class ViewController: UIViewController { override func loadView() { super.loadView() let str = NSMutableAttributedString(string: "5.08%~6.10%") str.addAtt...
【css】不同大小的字体底部对齐
热门推荐
汪小穆的博客
12-13 2万+
前言：不同font-size的字体会出现上下偏差，这是一个蛮令人头疼的问题。特别是中文字体(英文字体不会出现这种问题)。 <body> <style> b { font-size:24px; } span { font-size:50px; } </style> <div><b&g...
「CSS」利用flex设置字体大小不一的文字水平垂直居中，并且文字以字体底部对齐
xiaotangyu7dong的博客
03-04 3777
如何实现以下情景： 外部盒子先使用display:flex; justify-content: center; align-items: center; 将文字所在的内容盒子水平垂直居中于外部盒子中间，再将内容盒子display:flex; align-items: baseline; 将内容盒子里面的文字基于第一个文字的底部对齐。 html部分 <div class="box"> <div class="content"> <div class="num">8
iOS开发UILabel篇：两个字号大小不同的Label如何做到文字底部对齐
sail的技术博客
04-14 7791
在做商城应用的时候，会有一种UI布局是这样的： 商品现价的Label字号比较大，原价的Label字号较小，由于UILabel字号不同内边距就会不同，即使我们设置两个Label底部对齐，label内的文字也无法做的对齐 处理前：处理后：第一种处理方式：设置原价的Label与现价的Label底部做一个偏移即可。（不要让两个Laebl底部对齐）第二种处理方式：（设置内边距方式）继承UILabel
实现两个不同高度的UILabel的文字底部相对于下划线对齐。不是很简单吗？ 是吗？你敢按你常规方法试试让你那火眼金睛的设计、美工去瞧瞧？？？
Welcome to tikeyc's column
09-07 1359
我靠，一看：要实现两个不同高度的UILabel的文字底部相对于下划线对齐 不是很简单吗？ 是吗？你敢按你常规方法试试让你那火眼金睛的设计、美工去瞧瞧？？？    不管你怎么设置，是不是文字的高度和label的高度不一样呀？因为 font不一样这两个label很难底部对齐的。 Autolayout确实可以自动计算Label的大小，但是Label高度并不是文字有色像素的高度，就比如英文字母有d
android 字体对齐方式,android 中 Textview的底部文字对齐的两种方式
weixin_31951365的博客
05-26 2246
image.png第一种使用RelativeLayout中的android:layout_alignBaseline="@id/text1"方法。xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"android:layout_wid...
android设置TextView中不同的文字字体大小且垂直居中显示
03-14
通过这种方式，我们可以在一个TextView中实现不同字体大小的文字，并且可以根据需求调整它们的对齐方式。然而，为了实现真正的垂直居中，可能需要结合其他方法，比如自定义ViewGroup或使用第三方库。在实际开发中，...
Android 文本TextView底部对齐实现
nianlun1的博客
03-31 2554
前言 想要实现主体文字突出显示，前面是数值加粗，后面是单位符号，且底部对齐数值显示的效果；但是不同TextView字体大小排版后总是有些差别，无法底部对齐。百度一番后有重写TextView的，还有其它布局对齐等方法，效果并不好使。突然想起之前写的SpannableStringBuilder，其中AbsoluteSizeSpan可实现同一个TextView文字大小变化，而且底部是对齐的，于是就拿来使...
css文字和span在一行对不齐
weixin_43239880的博客
04-24 2136
注意：这个是加在父盒子身上的，而且一定要一个max-height，原因是text-overflow仅适用于具有固定宽度的块级元素。不直接加height是因为当标题不多的时候就可以自适应。
基于标准，实现底部对齐
whyhappy的专栏
04-07 640
很多人在以往的页面制作中用valign:bottom实现底部对齐。但是在xHTML中，CSS中没有了这个就不知道如何是好，以下为解决方法：css：#box1 {...}{ position : relative ; background : red ; height : 100px ; width : 100px ; } #box2 {...}{ position : absolute
关于div下span不对齐的解决问题
月想容的博客
05-23 1万+
问题：        在设计前端界面时，碰到在同一div下添加多个水平排列的div（或其他标签）和span时，存在高度不一致的问题。        &lt;template&gt; &lt;Layout&gt; &lt;!-- header --&gt; &lt;Header&gt; &lt;div style="height: 64px;float: left;padding-l...
前端两个span一行展示错位了以及前端样式过长显示...
migexiaoliang的博客
12-08 1429
前端两个span一行展示错位了以及前端样式过长显示...
HTML中span中文字下移,解决css给span加float:right-右浮动后内容下移
weixin_39869043的博客
06-03 4273
貌似有不少网友遇到过这样一个问题，在做新闻列表页(有标题和发布时间的那种)时，自己对发布日期用了float:right后，日期跑到下面去了，这个问题，我也遇到过，在此分享一下解决办法。关于这个问题我们先来看一个例子：-//W3C//DTD XHTML 1.0 Transitional//EN “ “http://www.w3.org/TR/xhtml1/DTD/xhtml1-tra...
css vertical-align属性详解
MorningDuGe
09-06 7475
适用场景vertical-align属性设置元素的对齐方式，只有具备以下两种属性的元素设置vertical-align后才起作用：1. display:inline 2. display:inline-block属性介绍HTML：<p>xxxxxxxxxxxxx<span>Lorem ipsum dolor</span></p>CSS： p{ height: 1
文本元素底边对齐问题
weixin_45763491的博客
08-02 1226
1.当行级块元素里没有内容时，后面跟着的文本和它盒子的底边对齐： <style type="text/css"> *{ margin: 0; padding: 0; } span{ display: inline-block; width: 100px; height: 100px; background-color: red; } </style> <body> <span></span&gt
div内容底部对齐
hellomy的专栏
09-17 1万+
<br /><html> <br /><head> <br /><meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <br /><title>CSS实现文字底部对齐</title> <br /><style type="text/css"> <br />#txt{<br /> height:246px; <br /> width:512px; <br /> border:1px solid #000000; <br /> 
在一个div里面的两个span标签没有对齐，或者在一个div里面的两个div没有对齐
感恩、奋进、自信
04-30 1万+
一、在一个div里面的两个span标签没有对齐，如下图红色圈所示红色圈的html如下&lt;div class="title"&gt; &lt;span class="brand"&gt;&lt;/span&gt; &lt;span class="name"&gt;{{seller.name}}&lt;/span&gt; &lt;/div&gt;
css中 让文字不论大小都底部对齐
最新发布
01-20
### 使用 CSS 实现不同大小文字的底部对齐 为了使不同大小的文字在视觉上保持底部对齐，可以采用多种方法来达到这一效果。 #### 方法一：使用 `display: table-cell` 和 `vertical-align` 通过将父容器设置为表格...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值