css 小知识点:inline/inline-block/line-height

inline:

此元素会被显示为内联元素,元素前后没有换行符。因此:无法设置宽度和高度~

inline-block:

行内块元素。元素前后没有换行符(CSS2.1 新增的值)

用通俗的话讲,就是独占一行的块级元素。然后拥有块级元素的属性,可以设置宽度和高度。


line-height:

  • 对于块级元素,line-height指定了元素内部line-boxes的最小高度
  • 对于非替代行内元素,line-height用于计算line-box的高度
  • 对于替代行内元素,例如input、button,line-height没有影响

这个属性可以实现多行文本垂直居中:

<div class="box"><div class="content">基于行高实现的...</div>
</div>CSS:
.box {width: 280px;line-height: 120px;background-color: #f0f3f9; // 为了看到外面盒子margin: auto;
}
.content {display: inline-block; // 设置为内联元素,并且可以有块级属性line-height: 20px;margin: 0 20px;text-align: left;vertical-align: middle;
}

效果:

 

单行文本,垂直居中:

 

<div>单行文本垂直居中
</div>css:
div{background-color: #abcdef; // 为了看line-height: 400px; // 只需要设置line-height
}

 

效果图:

 

最 后结语: 实现垂直居中的方法,我还是最喜欢flex,简单易懂,没那么多妖娥子。 只是现在兼容性不太好, 无奈脸。。。

 

本文转载于:猿2048https://www.mk2048.com/blog/blog.php?id=h01k11j&title=css 小知识点:inline/inline-block/line-height

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

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

相关文章

协同过滤算法_机器学习 | 简介推荐场景中的协同过滤算法,以及SVD的使用

本文始发于个人公众号&#xff1a;TechFlow&#xff0c;原创不易&#xff0c;求个关注今天是机器学习专题的第29篇文章&#xff0c;我们来聊聊SVD在上古时期的推荐场景当中的应用。推荐的背后逻辑有没有思考过一个问题&#xff0c;当我们在淘宝或者是某东这类电商网站购物的时候…

JavaOne 2012:观察与印象

当我坐在旧金山国际机场等待登上飞机返回家中时&#xff0c;我一次又一次令人满意但累人的JavaOne&#xff08;2012&#xff09;体验&#xff0c;我正在开始写这篇特别的博客文章。 自上周日的主题演讲以来&#xff0c;在会议上疯狂地撰写了约30篇博客文章之后&#xff0c;很难…

用imspost制作catia后处理_新产品开发需要做原型验证,怎么样成型制作才省钱?...

有一天一个朋友拿着一个公仔机器人的项目过来找我&#xff0c;说做200套外壳&#xff0c;问我如何省成本用最少的钱做好产品。类似一下图片的机器人一样。组装起来高200mm左右&#xff0c;内外配件总共是62个。我当时看到产品小估算重量也很轻&#xff0c;就跟他说用3D打印有快…

如何把大段文字转为带html标签的文字

开发网页的时候&#xff0c;有时候会遇到大段的隐私声明&#xff0c;用户协议等等&#xff0c;我们呀要复制粘贴展示出来&#xff0c;必须加大量的p标签&#xff0c;h1,h2&#xff0c;空格符&#xff0c;br标签&#xff0c;这对我们来说无疑是泪崩的&#xff0c;有个很好的办法…

使用MongoDB进行事件流

MongoDB是一个非常出色的“ NoSQL”数据库&#xff0c;具有广泛的应用程序。 在SoftwareMill开发的一个项目中&#xff0c;我们将其用作复制的事件存储&#xff0c;然后将事件从事件流传输到其他组件。 介绍 基本思想非常简单&#xff08;另请参阅Martin Fowler关于Event Sou…

c语言实训作业总结,c语言程序设计上机实践心得报告

c语言程序设计上机实践心得报告 班级:11 电信 2 姓名:莫金波 学号:1107032242012.12.28 惠州学院 HUIZHOU UNIVERSITY 我们专业的学生在专业老师的带领下进行了 c 语言设计基础教程的 实践学习。在这之前&#xff0c;我们已经对 c 语言这门课程学习了差不多一 个学期&#xff0…

JavaOne 2012:在JVM上诊断应用程序

值得参加Staffan Larsen &#xff08;Oracle Java Serviceability Architect&#xff09;的演讲“ 在JVM上诊断应用程序 ”&#xff08;Hilton Plaza A / B&#xff09;&#xff0c;只是为了学习Oracle JVM 7随附的新jcmd命令行工具。该演示对我来说是“奖金”&#xff0c;这对…

文档词频矩阵_论文理解:从词嵌入到文档距离

论文作者简介本论文第一作者Matt J. Kusner是牛津大学的副教授&#xff0c;致力于设计适应现实世界问题需求的新机器学习模型&#xff08;例如&#xff0c;fair algorithms, discrete generative models, document distances, privacy, dataset compression, budgeted learning…

c语言主调函数和被调函数,在C语言中,何为主调函数和被调函数,他们之 – 手机爱问...

2007-08-30请详细一些~最好举出例子你好。评价宝宝的标准基本上是&#xff1a;技能>资质>成长因为宝宝的评价是一项 仁者见仁的活儿&#xff0c;但其中有些规律我想是可以具体话的&#xff0c;希望能对你有帮助&#xff1a;1&#xff1a;技能&#xff1a;技能的意义有多大…

学习关于display :flex 布局问题!

很多人不明白这个display:flex是到底是什么东西&#xff0c;如何使用的 。 1.什么是display&#xff1a;flex呢&#xff1f; 答&#xff1a;flex是 flexible box的缩写&#xff0c;意为弹性布局 &#xff1b;这个东西的引入&#xff0c;为盒模型提供了最大的灵活性&#xf…

note同步不及时 one_一辆理想ONE又“跪了”?理想官方紧急发文回应

汽车行业关注(autochat.com.cn)10月16日报道——10月15日&#xff0c;有网友在社交媒体上发布视频&#xff0c;从视频可以看到&#xff0c;一辆理想ONE在遭遇事故后&#xff0c;左前轮脱落在车外疑似断轴,从视频未能判定是断轴引起的事故&#xff0c;还是事故引起的断轴。针对该…

Skywalking 中 Agent 自动同步配置源码解析

文章目录 前言正文实现架构实现模型OAP 同步 ApolloConfigWatcherRegisterConfigChangeWatcher Agent 侧 前言 本文代码 OAP 基于 v9.7&#xff0c;Java Agent 基于 v9.1&#xff0c;配置中心使用 apollo。 看本文需要配合代码“食用”。 正文 Skywalking 中就使用这种模型…

华为5720设置静态路由不通_【干货分享】交换机与路由器在环路中的处理机制了解一下!...

点击蓝字关注我们-今天小盟带大家来讨论一下交换机与路由器在环路中的处理机制-01基础配置1---如图配置路由器各接口地址&#xff0c;AR-2为PC-1的网关路由器2---AR-1配置静态默认路由&#xff0c;下一跳地址指向AR-2&#xff1b;[AR-1]ip route-static 0.0.0.0 0 12.1.1.2AR-2…

VisualVM介绍使用

1 打开VisualVM&#xff08;这个工具放在JDK安装目录的bin目录下&#xff0c;双击jvisualvm.exe即可打开&#xff09;&#xff0c;如下图所示 以VisualVM自身为例&#xff0c;VisualVM本身也是一个java程序&#xff0c;当然也而已用VisualVM来分析 2 概述页面主要显示程序…

Java功能的适用性

Java语言和标准库功能强大&#xff0c;但功能强大&#xff0c; 责任重大 。 一方面看到很多用户代码滥用或滥用稀有的Java功能&#xff0c;另一方面却完全忘记了大多数基本功能之后&#xff0c;我决定撰写此摘要。 这不是每个Java开发人员都应该探索&#xff0c;了解和使用的要…

台达b3伺服modbus通讯_【数控系统】台达伺服压机控制灵活 精准压合满足各种工序需求...

引言压机是一种利用压力改变工件形状的机械设备。随着制造业少量多样与客制化的日趋发展&#xff0c;压机的的优势逐渐显现&#xff0c;在汽车、五金与电子制造等产业中的应用不断增多。传统压机在使用操作上耗费人力并需要诸多压机元件才能完整运作&#xff0c;维修成本高&…

yolov4Linux,基于Darknet的YOLOv4目标检测

目录一、Windows环境下的YOLOv4目标检测1、环境配置环境准备&#xff1a;Win10、CUDA10.1、cuDNN7.65、Visual Studio 2019、OpenCV 3.4(1)Visual Studio2019企业版安装(3)下载并安装CUDA10.1&#xff0c;下载安装cuDNN7.65对于cudnn直接将其解开压缩包&#xff0c;然后需要将b…

二元置信椭圆r语言_医学统计与R语言:圆形树状图(circular dendrogram)

微信公众号&#xff1a;医学统计与R语言如果你觉得对你有帮助&#xff0c;欢迎转发输入1&#xff1a; "ggraph")结果1&#xff1a; name 输入2&#xff1a; <- graph_from_data_frame(myedges1, verticesmyvertices,directed T)ggraph(mygraph, layout dend…

Java:检查器框架

我在JavaOne 2012上 了解的有趣的工具之一是Checker Framework 。 Checker Framework的网页之一 指出 &#xff0c;Checker Framework“增强了Java的类型系统&#xff0c;使其更强大&#xff0c;更有用”&#xff0c;从而使软件开发人员“能够检测并防止Java程序中的错误”。 查…

南岸焊接机器人厂_造船三部高效焊接工艺技术年鉴

为了提升公司高效焊自动化率&#xff0c;实现降本增效目标&#xff0c;造船事业三部积极响应公司领导号召&#xff0c;充分挖掘自身资源&#xff0c;2020年&#xff0c;在高效焊接技术、设备开发研究等方面&#xff0c;不断创新、敢于突破&#xff0c;获取了多项焊接新技术、新…