居中问题: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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/547763.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

电脑技巧:Bandicam班迪录屏介绍

目录 一、 软件简介 二、软件功能 2.1 屏幕录制 2.2 游戏录制 2.3 设备录制 2.4实时编辑与截图 2.5 轻量级软件 三、软件用途 3.1 教育培训 3.2 游戏直播与分享 3.3 企业办公 3.4 在线教学与知识分享 四、总结 今天给大家推荐一款非常实用的电脑录屏软件&#xf…

深入浅出学习切片LOD——ArcGIS server模拟缓存切片(影像快显)

一、第一次实践 原理 免切片实现影像服务的模拟切片&#xff0c;主要原理是接收前端传过来的xyz(行列层级)以及切片方案&#xff0c;计算出该请求的切片的四至经纬度信息&#xff0c;通过mapserver的exportImage接口&#xff0c;传入每个模拟切片的四至经纬度信息得到图片返回…

nginxWebUI配置conf

在左边相应位置写入要修改的语句后&#xff0c;依次点击“校验文件”、“替换文件”、“重新装载”即可重启conf

柴油发电机负载原理是怎样的

柴油发电机负载原理是指当发电机在运行过程中&#xff0c;通过外部负载设备&#xff08;如电动机、照明设备等&#xff09;从发电机输出电能&#xff0c;从而使发电机内部的转子产生旋转磁场&#xff0c;进而驱动发电机的定子绕组产生交流电压的过程。这个过程涉及到发电机的工…

Leetcode - 128双周赛

目录 一&#xff0c;3110. 字符串的分数 二&#xff0c;3111. 覆盖所有点的最少矩形数目 三&#xff0c;3112. 访问消失节点的最少时间​编辑 写法一&#xff1a;朴素 Dijkstra&#xff08;适用于稠密图&#xff0c;即边比较多的图&#xff09; 写法二&#xff1a;堆优化 …

海思Hi3519 DV500 部署yolov5并加速优化

本项目代码已开源&#xff0c;见文末 导出onnx模型 yolov5官方地址 利用官方命令导出python export.py --weights yolov5n.pt --include onnx 或者自写代码导出 import os import sys os.chdir(sys.path[0]) import onnx import torch sys.path.append(..) from models.co…

Maui 显示当前时间

1、MainPage.xaml.cs 代码 using System.Threading;namespace Mauitime {public partial class MainPage : ContentPage{private Timer _timer;public MainPage(){InitializeComponent();_timer new Timer(_ > UpdateCurrentTime(), null, 0, 1000);}// 在页面显示时更新当…

CMC学习系列 (10):CMC计算方法介绍

CMC计算方法介绍 0. 引言1. 主要贡献2. 方法2.1 普通CMC2.2 小波CMC2.3 其余方法2.4 预处理增强型CMC 3. 总结欢迎来稿 论文地址&#xff1a;https://www.frontiersin.org/articles/10.3389/fnhum.2019.00100/full 论文题目&#xff1a;Corticomuscular Coherence and Its Appl…

基于springboot的高校教师教学质量评价系统

基于springboot的高校教师教学质量评价系统 前言 随着社会的发展&#xff0c;高校教师教学质量评价系统的管理形势越来越严峻。越来越多的用户利用互联网获得信息&#xff0c;但高校教师教学质量评价系统信息鱼龙混杂&#xff0c;信息真假难以辨别。为了方便用户更好的获得高…

2.SG90舵机模块

当我们输出一段脉冲信号的时候就可以调节舵机的角度 我们可以从原理图可以看到舵机的脚在PA6 从芯片手册我们又可以看到PA6对应TIM3_CH1,并且不用开启部分重映像就能使用 新建Servo.c存放PWM初始化 配置PWM void Servo_TIM3_Init(u16 arr,u16 psc) {//开启TIM3的时钟RCC_APB1…

Docker部署SpringBoot服务(Jar包映射部署)

介绍 项目在docker部署运行以后&#xff0c;每次需更新jar包时&#xff0c;都得重新制作镜像&#xff0c;再重新制作容器。流程及其繁琐&#xff0c;效率极低。 以下步骤是在不更新镜像和容器的前提下&#xff0c;直接更新jar完成项目更新的操作。 不重新制作镜像部署 1. 创…

基于单片机的智能模拟路灯控制系统

摘 要: 随着电力资源的紧缺,以及光污染和雾霾天气的影响,更智能化的路灯设计对人们的日常生活意义重大。本文的智能路灯控制系统是基于单片机的控制器,通过介绍该系统相应的硬件设计和软件设计,实现定时开关和依具体情况是否需要来开关路灯和进行亮度调节,并且具有自检功能…

CESS 受邀出席香港Web3.0标准化协会第一次理事会议,共商行业未来

2024 年 4 月 5 日&#xff0c;CESS&#xff08;Cumulus Encrypted Storage System&#xff09;作为香港 Web3.0 标准化协会的副理事会成员&#xff0c;于香港出席了 2024 年度第一次理事会会议。此次会议汇聚了来自不同领域的知名企业和专家&#xff08;参会代表名单见文末&am…

PaddleOCR训练自己模型(1)----数据准备

一、下载地址&#xff1a; PaddleOCR开源代码&#xff08;下载的是2.6RC版本的&#xff0c;可以根据自己需求下载&#xff09; 具体环境安装就不详细介绍了&#xff0c; 挺简单的&#xff0c;也挺多教程的。 二、数据集准备及制作 &#xff08;1&#xff09;下载完代码及配置…

实时气象水文监测站

TH-SW4随着科技的飞速发展和人类对环境保护意识的日益增强&#xff0c;实时气象水文监测站在水库环境管理中的作用日益凸显。这种在线监测技术不仅为水库的安全运行提供了坚实的技术支撑&#xff0c;也为环境保护和灾害预防提供了及时、准确的数据支持。 一、实时气象水文监测…

酷开科技以用户为中心,搭建强大空间赋能的酷开系统

从市场前景和竞争格局来看&#xff0c;现在人口红利正在消逝&#xff0c;中国刚需类家电消费正在进入饱和期。在目前激烈的市场竞争环境下&#xff0c;智能家电正在成为家居市场新宠儿。酷开科技以用户为中心&#xff0c;为用户搭建智能的酷开系统&#xff0c;具有强大的空间赋…

[C++][算法基础]求最小生成树(Prim)

给定一个 n 个点 m 条边的无向图&#xff0c;图中可能存在重边和自环&#xff0c;边权可能为负数。 求最小生成树的树边权重之和&#xff0c;如果最小生成树不存在则输出 impossible。 给定一张边带权的无向图 G(V,E)&#xff0c;其中 V 表示图中点的集合&#xff0c;E 表示图…

【C++】explicit关键字详解(explicit关键字是什么? 为什么需要explicit关键字? 如何使用explicit 关键字)

目录 一、前言 二、explicit关键字是什么&#xff1f; 三、构造函数还具有类型转换的作用 &#x1f34e;单参构造函数 ✨引出 explicit 关键字 &#x1f34d;多参构造函数 ✨为什么需要explicit关键字&#xff1f; ✨怎么使用explicit关键字&#xff1f; 四、总结 五…

硕博电子经济型高性能LED面板

在科技进步的洪流中&#xff0c;硕博电子始终保持敏锐的洞察力与创新能力。SPM-LEDP-C12是硕博电子开发的兼具性价比与创新性能的LED面板。该产品具备1路CAN总线&#xff0c;12个LED指示灯&#xff08;丝印字符带背光&#xff09;。 不同于以往独立控制的单个指示灯&#xff…

StableDiffusion-02 LoRA上手使用实测 尝试生成图片 使用多个LoRA 调整LoRA效果 10分钟上手 多图

准备工作 请你确保&#xff0c;你已经完成了 StableDiffusion-01 这一节的内容&#xff0c;可以顺利的运行SD&#xff0c;并且可以正常的生成图片。 本节我们就尝试使用LoRA并生成图片。 介绍 LoRA Stable Diffusion中的LoRA&#xff08;Low-Rank Adaptation&#xff0c;低秩…