使用css将文字在水平线中显示

news2024/11/22 15:42:11

方法一:

1.效果图

2.html

<!-- <div class="line">
                第三方登录
     </div> -->

3.css

/* 让文字在水平线中显示 */
 .line {
    display: flex;
    flex-direction: row;
    color: #ccc;
    font-size: 18px;
    font-weight: bolder;
}

.line:before,
.line:after {
    content: "";
    flex: 0.8 0.8;
    border-bottom: 2px solid #ccc;
    margin: auto;
}

方法二

1.效果图

2.html

<div class="divider">
                <p></p>
                <div class="divider-text">申请处理进度</div>
                <p></p>
            </div>

3.css

.divider{
    width: 100%;
    display: flex;
    p{
      width: 48%;
       height: 1px;
       border-top: 1px orange dashed;
      margin: 0;
      vertical-align: middle;
     }
    .divider-text{
      padding: 0 20px;
      color: orange;
      transform: translateY(-50%);
      display: inline-block;
      font-size: 17px;
    }
}

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Spring boot3.x 无法向 Nacos2.x进行服务注册的问题

一&#xff1a;问题描述 配置中心都是可用的&#xff0c;但是就是无法向nacos进行服务注册。 二&#xff1a;问题可能出现的原因有如下两种 1.Nacos2.0版本相比1.X新增了gRPC的通信方式&#xff0c;因此需要增加2个端口。除了8848还需要开放9848&#xff0c;9849端口。 官方…

阿里云负载均衡对接

1 、开通负载均衡产品 2 、ALB / NLB / CLB ALB&#xff1a; 应用型负载均衡 &#xff0c; 给定对应服务域名与当前实例DNS绑定之后即可使用 支持&#xff1a; HTTP/HTTPS/QUIC等应用层流量协议 NLB&#xff1a; 网络型负载均衡 支持&#xff1a; TCP / UDP / TCPSSL C…

安装miniconda、tensorflow、libcudnn

目录 安装miniconda 安装tensorflow 安装 libcudnn 安装miniconda wget https://repo.anaconda.com/miniconda/Miniconda3-latest-Linux-x86_64.sh && bash Miniconda3-latest-Linux-x86_64.sh 安装tensorflow tensorflow官网&#xff0c;查看版本对应 https:…

阿里云 Flink 原理分析与应用:深入探索 MongoDB Schema Inference

摘要&#xff1a;本文整理自阿里云 Flink 团队归源老师关于 阿里云 Flink 原理分析与应用&#xff1a;深入探索 MongoDB Schema Inference 的研究&#xff0c;内容主要分为以下四部分&#xff1a; 1. MongoDB 简介 2. 社区MongoDB CDC 核心特性 3. MongoDB CDC 在阿里云 Flink …

网络通信(18)-C#TcpClient 和 TcpListener的使用实例

本文演示C#TcpClient 和 TcpListener的使用实例,掌握基本用法。 目录 TcpListener服务器 客户端TcpClient TcpListener服务器 界面 UI代码 namespace TcpListenerDemo {partial class Form1{/// <summary>/// 必需的设计器变量。/// </summary>private System…

【GitHub项目推荐--不错的Rust开源项目】【转载】

01 Rust 即时模式 GUI 库 egui 是一个简单、快速且高度可移植的 Rust 即时模式 GUI 库&#xff0c;可以轻松地将其集成到你选择的游戏引擎中&#xff0c;旨在成为最易于使用的 Rust GUI 库&#xff0c;以及在 Rust 中制作 Web 应用程序的最简单方法。 项目地址&#xff1a;ht…

对齐大型语言模型与人类偏好:通过表示工程实现

1、写作动机&#xff1a; 强化学习表现出相当复杂度、对超参数的敏感性、在训练过程中的不稳定性&#xff0c;并需要在奖励模型和价值网络中进行额外的训练&#xff0c;导致了较大的计算成本。为了解决RL方法带来的上述挑战&#xff0c;提出了几种计算上轻量级的替代方案&…

图像处理算法:白平衡、除法器、乘法器~笔记

参考&#xff1a; 基于FPGA的自动白平衡算法的实现 白平衡初探 (qq.com) FPGA自动白平衡实现步骤详解-CSDN博客 xilinx 除法ip核&#xff08;divider&#xff09; 不同模式结果和资源对比&#xff08;VHDL&ISE&#xff09;_ise除法器ip核-CSDN博客 数…

关于C#中的HashSet<T>与List<T>

HashSet<T> 表示值的集合。这个集合的元素是无须列表&#xff0c;同时元素不能重复。由于这个集合基于散列值&#xff0c;不能通过数组下标访问。 List<T> 表示可通过索引访问的对象的强类型列表。内部是用数组保存数据&#xff0c;不是链表。元素可重复&#xf…

Istio-gateway

一. gateway 在 Kubernetes 环境中&#xff0c;Kubernetes Ingress用于配置需要在集群外部公开的服务。但是在 Istio 服务网格中&#xff0c;更好的方法是使用新的配置模型&#xff0c;即 Istio Gateway&#xff0c;Gateway 允许将 Istio 流量管理的功能应用于进入集群的流量&…

C#基础:用ClosedXML实现Excel写入

直接在控制台输出&#xff0c;确保安装了该第三方库 using ClosedXML.Excel;class DataSource {public int id { get; set; }public string name { get; set; } "";public string classes { get; set; } "";public int score { get; set; } } class Te…

深入浅出hdfs-hadoop基本介绍

一、Hadoop基本介绍 hadoop最开始是起源于Apache Nutch项目&#xff0c;这个是由Doug Cutting开发的开源网络搜索引擎&#xff0c;这个项目刚开始的目标是为了更好的做搜索引擎&#xff0c;后来Google 发表了三篇未来持续影响大数据领域的三架马车论文&#xff1a; Google Fil…

spring Cloud Stream 实战应用深度讲解

springCloudStream 简介 Spring Cloud Stream是一个框架&#xff0c;用于构建与共享消息传递系统连接的高度可扩展的事件驱动微服务。 该框架提供了一个灵活的编程模型&#xff0c;该模型建立在已经建立和熟悉的 Spring 习惯用语和最佳实践之上&#xff0c;包括对持久发布/订…

【Maven】-- 打包添加时间戳的两种方法

一、需求 在执行 mvn clean package -Dmaven.test.skiptrue 后&#xff0c;生成的 jar 包带有自定义系统时间。 二、实现 方法一&#xff1a;使用自带属性&#xff08;不推荐&#xff09; 使用系统时间戳&#xff0c;但有一个问题&#xff0c;就是默认使用 UTC0 的时区。举例…

什么叫特征分解?

特征分解&#xff08;Eigenvalue Decomposition&#xff09;是将一个方阵分解为特征向量和特征值的过程。对于一个 nn 的方阵A&#xff0c;其特征向量&#xff08;Eigenvector&#xff09;v 和特征值&#xff08;Eigenvalue&#xff09; λ 满足以下关系&#xff1a; 这可以写…

Python批量自动处理文件夹

假如在你的电脑硬盘某文件夹里有这样一堆不同格式的文件&#xff0c;看起来非常混乱&#xff0c;详情如图所示&#xff1a; 为了方便自己快速检索到文件&#xff0c;我们需要将这些文件按照不同格式分类整理到不同的文件夹中&#xff0c;应该怎么做呢&#xff1f;源码如下&…

v39.for循环while循环

1.循环引入&#xff08;loops&#xff09; 2.while loop 当括号中表达式expression返回真值时&#xff0c;代码块执行 。之后将再次检查expression &#xff0c;如果仍然返回真值&#xff0c;继续执行......直到expression返回假值。 3.for loop 有初始化、条件、递增/减 步骤。…

Zookeeper集群 + Kafka集群,Filebeat+Kafka+ELK

目录 什么是Zookeeper&#xff1f; Zookeeper 工作机制 Zookeeper 特点 Zookeeper 数据结构 Zookeeper 选举机制 实验 部署 Zookeeper 集群 1.安装前准备 安装 JDK 下载安装包 2.安装 Zookeeper 修改配置文件 拷贝配置好的 Zookeeper 配置文件到其他机器上 在每个节…

uni-app (安卓、微信小程序)接口封装 token失效自动获取新的token

一、文件路径截图 1、新建一个文件app.js存放接口 //这里存放你需要的接口import {request} from /utils/request.js //这个文件是请求逻辑处理 module.exports {// 登录 -- 注册perssonRegister: (data) > { // 供应商注册 return request({url: manageWx/Login/perssonR…

npm i 报一堆版本问题

1&#xff0c;先npm cache clean --force 再下载 插件后缀加上 --legacy-peer-deps 2&#xff0c; npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.npm.taobao.org/yorkie/download/yorkie-2.0.0.tgz failed, reason…