居中问题:line-height、基线

2024-04-16 12:12
文章标签 问题 居中 line height 基线

本文主要是介绍居中问题:line-height、基线,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

html5+CSS3的居中专题

完整链接:
https://pan.baidu.com/s/16IhFoBC2gNPZwosyS6UXxQ 密码: ft2j
–来自百度网盘超级会员V7的分享

居中问题

a. 行内元素

  • 水平居中:父标签设置text-align:center

  • 垂直居中:父标签设置line-height值等于其高度height,如height:50px; line-height:50px;

b. 文本

  • 水平居中:当前标签设置text-align:center

  • 垂直居中:当前标签设置line-height值等于父标签的高度height

c. 块级元素

  • 使用position属性

    使用top、bottom、left、right,可以设置块元素距离上下左右的距离,设置transform:translateX(-50%),可以让元素回撤X轴方向的当前块的50%。

    • 水平居中:position: absolute;left:50%; transform:translateX(-50%);

    • 垂直居中:position: absolute;top:50%;transform: translateY(-50%);

    • 同时居中:position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);

  • 使用行内块display:inline-block

    • 水平居中:父标签设置text-align:center,如下,点开可看代码1

    • 垂直居中:

      • 父标签设置line-height值等于父标签的高度height,注意,此时会出现基线问题(可以看3.0章节),如下:
      • 要在子元素中设置vertical-align:middle, 实现垂直居中。如下
    • 如代码示例,子元素box1设置为inline-block之后,就可以让父标签设置为text-align:center实现块级别元素的居中。使用vertical-align:middle实现垂直居中

  • 使用margin可以设置

1. line-height

1.1 作用

使文本内容垂直居中。通俗理解,设置内容的行高,如果行高与容器高度一致,便可垂直居中,如:div元素中

<div class='container'>文本内容</div>

设置css样式为,div容器高度30px,文本内容高度也为30px,则可居中。

.container {height: 30px;line-height: 30px
}

1.2 原理

行高包含了内容、上间距和下间距。也可以说是两个基线之间的距离。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

2. 基线问题

2.1 我遇到的基线问题

文本和图片、button在一块,使内容无法居中。

  • 注意:文本内容和input标签是对齐

  • img和button看作inline-block行内块,对应开头块级元素的居中问题

  • 其中,文本的基线和图片以及button的基线对齐了

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

在默认样式中,设置如下:

.text-test {height: 70px;line-height: 70px;background-color: antiquewhite;}
<div class="text-test"><span>发疯的小孩 123123</span><img src="./images/seckill-icon.png" style="" alt=""><button style="width: 50px; height: 50px;"></button><input type="search" style="width: 100px; height: 40px; ">
</div>

如何解决,就要针对基线进行操作。

《基线问题的解决》

img标签和button标签的基线和文本的内容对齐,因此需要调整的是img和button的基线居中,

使用**:vertical-align: middle**;可以解决,如下:

img {vertical-align: middle;
}
button {vertical-align: middle;
}

从而,页面恢复正常

<div class="text-test"><span>发疯的小孩 123123</span><img src="./images/seckill-icon.png" style="vertical-align: middle;" alt=""><button style="width: 50px; height: 50px;vertical-align: middle;"></button><input type="search" style="width: 100px; height: 40px; ">
</div>

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

2.2 什么情况下会出现基线问题?

HTML 中的基线问题通常指的是在页面布局中,元素的基线(baseline)不对齐或错位,从而导致页面呈现出意外的效果。基线是用于对齐文本和其他行内元素的水平线,因此在设计页面时,正确地对齐基线是很重要的。

当特定标签与文本混排或布局时,可能会出现基线问题。以下是每个标签可能引发基线问题的一些示例:

  1. <img>:假设你有一段文本与图片混排,但图片底部的基线与文本的基线不对齐,可能导致文本与图片之间的垂直间距不一致。
<p>This is some text <img src="example.jpg" alt="Example Image"> with an image.</p>
  1. <input>:如果你的表单中包含文本和输入框,并且它们的基线不对齐,可能会导致表单布局看起来不整齐。
<label for="username">Username:</label>
<input type="text" id="username" name="username">
  1. <textarea>:在一个包含文本和 <textarea> 的表单中,如果 <textarea> 的基线与周围文本的基线不对齐,可能会导致表单的外观不一致。
<label for="message">Message:</label><br>
<textarea id="message" name="message" rows="4" cols="50"></textarea>
  1. <button>:如果你的按钮与周围文本不对齐,可能会导致按钮看起来脱离上下文。
<p>This is some text <button>Submit</button>.</p>
  1. <select>:当 <select> 元素与周围文本不对齐时,可能会使表单布局看起来不一致。
<label for="cars">Choose a car:</label>
<select id="cars" name="cars"><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="mercedes">Mercedes</option><option value="audi">Audi</option>
</select>
  1. <iframe>:当你嵌入一个 <iframe> 时,如果 <iframe> 的基线与周围文本不对齐,可能会导致页面布局问题。
<p>This is some text <iframe src="https://example.com"></iframe>.</p>

这些示例展示了如何可能出现基线问题的情况。通常,通过调整 CSS 样式来对齐这些元素的基线是解决问题的方法之一。

3. Text-align

可以使容器中的文本内容居中显示,包括了文本和基本的行内元素,如span、img、button、input、a等标签

<div class="text-test" style="text-align: center;"><span>发疯的小孩 123123</span><img src="./images/seckill-icon.png" style="" alt=""><button style="width: 50px; height: 50px;"></button><input type="search" style="width: 100px; height: 40px;">
</div>

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

注意!!!text-align不能让块级元素居中,只能让块级元素的内容在当前块中居中,如


<div class="text-test" style="text-align: center;"><p style="width: 100px;height: 70px; border: 1px solid;">4234325235</p></div>

其中p标签继承了div标签的text-align:center,是的p标签的内容在p标签中居中了,

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

想让整个块居中,还是要用position属性

参考文献

  • https://blog.csdn.net/qq_41880073/article/details/115025963

这篇关于居中问题:line-height、基线的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/908767

相关文章

好题——hdu2522(小数问题:求1/n的第一个循环节)

好喜欢这题,第一次做小数问题,一开始真心没思路,然后参考了网上的一些资料。 知识点***********************************无限不循环小数即无理数,不能写作两整数之比*****************************(一开始没想到,小学没学好) 此题1/n肯定是一个有限循环小数,了解这些后就能做此题了。 按照除法的机制,用一个函数表示出来就可以了,代码如下

hdu1043(八数码问题,广搜 + hash(实现状态压缩) )

利用康拓展开将一个排列映射成一个自然数,然后就变成了普通的广搜题。 #include<iostream>#include<algorithm>#include<string>#include<stack>#include<queue>#include<map>#include<stdio.h>#include<stdlib.h>#include<ctype.h>#inclu

购买磨轮平衡机时应该注意什么问题和技巧

在购买磨轮平衡机时,您应该注意以下几个关键点: 平衡精度 平衡精度是衡量平衡机性能的核心指标,直接影响到不平衡量的检测与校准的准确性,从而决定磨轮的振动和噪声水平。高精度的平衡机能显著减少振动和噪声,提高磨削加工的精度。 转速范围 宽广的转速范围意味着平衡机能够处理更多种类的磨轮,适应不同的工作条件和规格要求。 振动监测能力 振动监测能力是评估平衡机性能的重要因素。通过传感器实时监

缓存雪崩问题

缓存雪崩是缓存中大量key失效后当高并发到来时导致大量请求到数据库,瞬间耗尽数据库资源,导致数据库无法使用。 解决方案: 1、使用锁进行控制 2、对同一类型信息的key设置不同的过期时间 3、缓存预热 1. 什么是缓存雪崩 缓存雪崩是指在短时间内,大量缓存数据同时失效,导致所有请求直接涌向数据库,瞬间增加数据库的负载压力,可能导致数据库性能下降甚至崩溃。这种情况往往发生在缓存中大量 k

6.1.数据结构-c/c++堆详解下篇(堆排序,TopK问题)

上篇:6.1.数据结构-c/c++模拟实现堆上篇(向下,上调整算法,建堆,增删数据)-CSDN博客 本章重点 1.使用堆来完成堆排序 2.使用堆解决TopK问题 目录 一.堆排序 1.1 思路 1.2 代码 1.3 简单测试 二.TopK问题 2.1 思路(求最小): 2.2 C语言代码(手写堆) 2.3 C++代码(使用优先级队列 priority_queue)

【VUE】跨域问题的概念,以及解决方法。

目录 1.跨域概念 2.解决方法 2.1 配置网络请求代理 2.2 使用@CrossOrigin 注解 2.3 通过配置文件实现跨域 2.4 添加 CorsWebFilter 来解决跨域问题 1.跨域概念 跨域问题是由于浏览器实施了同源策略,该策略要求请求的域名、协议和端口必须与提供资源的服务相同。如果不相同,则需要服务器显式地允许这种跨域请求。一般在springbo

题目1254:N皇后问题

题目1254:N皇后问题 时间限制:1 秒 内存限制:128 兆 特殊判题:否 题目描述: N皇后问题,即在N*N的方格棋盘内放置了N个皇后,使得它们不相互攻击(即任意2个皇后不允许处在同一排,同一列,也不允许处在同一斜线上。因为皇后可以直走,横走和斜走如下图)。 你的任务是,对于给定的N,求出有多少种合法的放置方法。输出N皇后问题所有不同的摆放情况个数。 输入

vscode中文乱码问题,注释,终端,调试乱码一劳永逸版

忘记咋回事突然出现了乱码问题,很多方法都试了,注释乱码解决了,终端又乱码,调试窗口也乱码,最后经过本人不懈努力,终于全部解决了,现在分享给大家我的方法。 乱码的原因是各个地方用的编码格式不统一,所以把他们设成统一的utf8. 1.电脑的编码格式 开始-设置-时间和语言-语言和区域 管理语言设置-更改系统区域设置-勾选Bata版:使用utf8-确定-然后按指示重启 2.vscode

Android Environment 获取的路径问题

1. 以获取 /System 路径为例 /*** Return root of the "system" partition holding the core Android OS.* Always present and mounted read-only.*/public static @NonNull File getRootDirectory() {return DIR_ANDR

form表单提交编码的问题

浏览器在form提交后,会生成一个HTTP的头部信息"content-type",标准规定其形式为Content-type: application/x-www-form-urlencoded; charset=UTF-8        那么我们如果需要修改编码,不使用默认的,那么可以如下这样操作修改编码,来满足需求: hmtl代码:   <meta http-equiv="Conte