前段不定宽高的div垂直居中

2024-04-26 12:48

本文主要是介绍前段不定宽高的div垂直居中,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

css控制居中的方法:

1:外层是块级元素,内部是行内元素,例如:给一张图片设置居中的方法;

<!----css---->

<span class="re0">#div</span> <span class="br0">{</span>
<span class="kw1">line-height</span><span class="sy0">:</span> <span class="re3">200px</span><span class="sy0">;</span>
text-align:center;
<span class="br0">}</span>
<span class="re0">#div</span> img <span class="br0">{</span>
<span class="kw1">vertical-align</span><span class="sy0">:</span> <span class="kw2">middle</span><span class="sy0">;</span>
<span class="br0">}</span>
2:外层是div块级元素,内部也是块级元素控制居中,

#out{

display:flex;

justify-content:center;

align-items:center;

}

#inner{

}

或者

#out{

position:relative;

}

#inner{

margin:auto;

position:absolute;

top:0;

left:0;

bottom:0;

right:0;

}

3.外层是块级元素,内部是文本text,可以使用line-height来控制居中





<!-----css---->

div{

position:absolute;

top:50%;

left:50%;

transform:translate(-50%,-50%);

}

这篇关于前段不定宽高的div垂直居中的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



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

相关文章

基于CTPN(tensorflow)+CRNN(pytorch)+CTC的不定长文本检测和识别

转发来源:https://swift.ctolib.com/ooooverflow-chinese-ocr.html chinese-ocr 基于CTPN(tensorflow)+CRNN(pytorch)+CTC的不定长文本检测和识别 环境部署 sh setup.sh 使用环境: python 3.6 + tensorflow 1.10 +pytorch 0.4.1 注:CPU环境

通用大模型 vs垂直大模型:AI界的“宫斗大戏”

科技圈最近可真热闹,AI大模型的“宫斗大戏”让人眼花缭乱。两个阵营:通用大模型和垂直大模型,正在上演一场激烈的“权力的游戏”。到底谁能笑到最后?咱们一起来“吃瓜”看看吧! 首先,登场的是“全能王”通用大模型。它们就像是学习成绩顶尖、体育全能的学霸,什么都懂,什么都能干。 通用大模型:全能选手看看这家伙的优势: 通用大模型就像那种考上清华北大的学霸,不管是文科还是理科,全都能拿下。从写文章到

深入理解单一应用架构、垂直应用架构和分布式服务架构

什么是单一应用架构? 单一应用架构(Monolithic Architecture)是一种传统的软件架构模式,其中所有的功能模块被构建成一个独立的可部署单元。简单来说,整个应用程序作为一个整体被打包和部署。 单一应用架构的特点 集中管理:所有的功能模块都在一个代码库中进行管理。统一部署:整个应用程序作为一个单独的单元进行打包和部署。紧耦合:模块之间的依赖关系较强,一个模块的修改可能会影响到其

flex布局无法设置图片icon和文本垂直居中对齐问题

项目场景: 需要实现下面的效果,即图标和文字垂直对齐。 问题描述 直接使用flex布局并设置垂直居中,发现并没有垂直对齐,图片明显偏上。 .wrapper {display: flex;align-items: center;}.view-icon {height: 28px;width: 28px;margin-right: 6px;}.view-text {font-siz

深入理解CSS中的文本对齐方式:水平对齐与垂直对齐

在CSS中,文本对齐是一个常见的需求,它关乎到页面布局的美观和可读性。本文将详细介绍CSS中用于控制文本水平对齐和垂直对齐的属性,以及如何使用它们来提高网页设计的质量。 水平对齐:text-align text-align 属性是CSS中用于控制元素内文本的水平对齐方式的属性。它主要应用于块级元素,如 <div>、<p> 等。以下是一些常用的 text-align 值: left:文本左对齐

面试必考题 CSS的居中布局

CSS居中对齐的几种方式 使用flex布局利用css3中的flex弹性盒的属性利用子元素auto 使用grid布局使用定位使用定位与margin利用CSS3属性transform 使用文本对齐使用table布局 使用flex布局 利用css3中的flex弹性盒的属性 .parent {display: flex;justify-content: center;align-i

如何在 Tailwind CSS 中实现居中对齐

如何在 Tailwind CSS 中实现居中对齐: 1. 使用 text-center 类(针对行内元素或行内块元素) 这个类用于将文本或行内块元素水平居中对齐。 <div class="text-center"><span>这是一个行内元素</span></div> 解释:text-center 将父元素内的所有文本内容和行内块元素水平居中对齐。 2. 使用 mx-auto 类(针

通用VS垂直,谁将领跑落地新纪元?

随着人工智能技术的飞速发展,大模型已成为推动各行业智能化升级的核心力量。在这个充满挑战与机遇的领域,通用大模型与垂直大模型之间的竞争正愈演愈烈。它们各自有着不同的优势,然而究竟谁能在大模型的第一个赛点拔得头筹,领跑未来智能化进程,尚未有定论。  首先,让我们了解一下通用大模型。通用大模型具备强大的泛化能力,适用于各种不同的任务和场景,如自然语言处理、图像识别、语音识别等。这种广泛的适用性使得通

HTML基础知识一(HTML、常见方式、文档结构、lt;metagt;、 网站文件命名、文本修饰、文本样式、段落标记、居中标记、水平线标记、特殊字符、列表、图像)

1、 HTML 全称:Hyper Text Mark-up Language超文本标记语言 2、 发展史: 3、 常见方式: 方法一、记事本 方法二:Dreamweaver 方法三:web浏览器动态生成 4、 文档结构: <html></html>网站文件的开始和结束 <head></head>网站文件的头部信息 <title></title>网站文件的标题 <body></

Android获取控件宽高的几种方式

第一种方式:在需要时获取,如控件点击时再获取 button.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { getTextWidthAndHeight(); } }); 第二种方式:重写onWindowFocusChanged()方法 @Override