前言

行内元素：指在同一行内不自动换行，可以和其他行内元素在同一水平的元素，不可以设置宽高。

行内元素设置宽高：行内元素想要设置宽高，需要用display：inline-block设置（详解如下表）。

display值	作用
display:block	设置元素为块级元素（块级元素独占一行，可以设置宽高）
display:inline	设置元素为行内元素（行内在一行排列，不可以设置宽高）
display：inline-block	设置元素为行内块级元素（此值见名知意，融合了块级元素和行内元素的特性，是一个可以设置宽高的块级元素）

正文

代码：

其文本不水平垂直居中主要是因为设置宽高后导致的，解决方法很简单

水平居中：

text-align: center;

上下居中（30px是由span的高决定的）：

line-height: 30px;

效果（这下文本就居中了）：

解析

主要因为设置过宽高后，文本默认其实还是以一个正常的行内元素的排版样式显示的（他还没有意识到自己有了宽高），所以需要设置水平居中（text-align: center;），在设置垂直居中（行高）就行了（line-height: 30px;），注意设置行高要想垂直居中效果，行高必须和元素高度设置一致，这样字体才能知道自己在一个30px高的行内，那样他才能去居中显示。

设置行内元素宽高和背景色后，行内元素文本不水平垂直居中解决方案相关推荐

vue 获取元素宽高
vue 获取元素宽高 vue 中获取组件宽高分两种情况: 1.获取普通组件宽高,直接使用 $refs 即可 2.获取子组件宽高,需使用 $refs.$el 子组件 <template>&l ...
jquery获取设置元素宽高位置height()、width()、offset()、position()、scrollTop()、scrollLeft()
全栈工程师开发手册 (作者:栾鹏) jquery系列教程2-style样式操作全解 jquery获取设置元素宽高位置 jquery的通过height().width().offset().positi ...
微信小程序动态获取和设置元素宽高
需求由于设计界面时常常会用到vh和rpx来设置元素的宽高,但是由于每个手机屏幕的高都不确定,而有时候在设计界面时想把内容刚好适应屏幕大小. 解决方法设置要动态修改宽高的元素. <view c ...
如何通过JS获取元素宽高
方法一:DOM节点.offsetWidth/offsetHeight 作用:获取到的是内容区域(content) + 内边距(padding) + 边框(border)的值,输出一个数字. <s ...
原生js获取html元素高度,原生JS获取元素宽高实践详解
开篇的话任何不是亲身实践中求得的知识,都不是属于你的. 任何求得的知识不去时常温习运用,也不是属于你的. 记录由来在做个上拉广告功能中遇到了一个"理所当然"觉得对的用法,慢慢才 ...
页面宽高，窗口宽高，元素宽高，元素位置，页面滚动距离
注:以下内容只适用于chrome 页面宽高: document.body.clientWidth/Height(不包括margin) document.body.offsetWidth/Height( ...
微信小程序view动态长度_微信小程序实现动态获取元素宽高的方法分析
本文实例讲述了微信小程序实现动态获取元素宽高的方法.分享给大家供大家参考,具体如下: 我以前一直以为微信小程序不能动态获取view元素的宽高.但是自从看到: wx.createSelectorQuer ...
微信小程序背景图片设置和图片自适应宽高
微信小程序背景图片设置和图片自适应宽高我们在开发过程中经常需要对一些元素设置图片为背景图片. 网络图片: .ServiceCenter{width: 100vw;height: 40vw;margi ...
jquery获取元素宽高
前言 jquery获取元素宽高 <!DOCTYPE html> <html lang="zh" > <head><meta charset ...

设置行内元素宽高和背景色后，行内元素文本不水平垂直居中解决方案

前言

正文

解析

设置行内元素宽高和背景色后，行内元素文本不水平垂直居中解决方案相关推荐

最新文章

热门文章