text-align margin line-height之间的区别

于 2022-08-09 09:16:41 发布
阅读量4.5k 收藏 1
点赞数
分类专栏： vue 文章标签： html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42584411/article/details/126240558
版权

我这个脑子，每每都忘。。。这咋搞。。还是记笔记吧

text-align:center 
line-height
margin:0 auto

text-align:一般设置内联标签或者包含文字的标签的居中div文字的水平居中

line-height：div文字的垂直居中

margin：一般常常设置块级元素的居中，如果不是块级元素就要将行内元素转换成块级元素（display:block）

蓝奕世
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
行高（line-height)、margin、float
淑娟的博客
03-21 1177
一.行高（line-height） 将行高设置等于容器的高度可以让文本垂直居中 1.行高是可以继承的 例： Document .father{ width:100px; height:30px; background:red; line-height:30px; } .son{ } abcef 二.margin
css之文本属性text-align/text-decoration(取消a标签下划线)/text-indent/line-height
smilling sky的博客
04-04 1703
1.对齐文本（text-align） （:first-child、:nth-child(n)、:last-child的含义：https://www.cnblogs.com/knightdreams6/p/11109755.html） 例子： < !DOCTYPE html> < html lang=“en”> < head> < meta charset...
text-align：center和line-height有什么区别？
LuckXinXin的博客
02-29 1286
text-align是水平对齐， line-height是行间。
text-align：center和line-height等于行高的区分
xiaoxili2022的博客
04-23 187
有的时候在想让元素或者文字居中的时候总是分不清该用哪一个，我自己的简单记忆方法，用前者将元素标签居中，用后者将文字居中
CSS中，text-align和line-height的使用
不止于代码
08-03 3085
text-align：以值为center为例，当前块级容器里的所有行内元素(包括img)在当前容器中横向居中，所有子块级容器里的所有行内元素在它的直接父容器中居中，不影响块级元素的位置，如例1 块级元素居中可以用 margin：*px auto; line-height：可以用在段落中，改变多行文字之间的行距；把某容器的line-height设置与height相同的值，可以使容器中的一行内...
水平垂直居中，text-align 、margin和line-height的相关用法
MY1942966637的博客
10-18 865
text-align 、margin与line-height 1、text-align:center; 设置块级元素包括行内块元素（有确定宽度）内文本水平居中对齐方式； 设置行内块元素（包括由display:inlineblock转化的行内块元素，但是不包括浮动隐式转化的行内块元素）在父盒子内水平居中对齐； 例：给父盒子div添加属性text-align:center；时，当子元素a通过displ...
深入理解 line-height 和 vertical-align
09-22
深入理解`line-height`和`vertical-align`是前端开发中至关重要的部分，它们在文本布局和元素对齐中起着核心作用。`line-height`控制行间的垂直间距，而`vertical-align`则调整元素在行内的垂直位置。下面将详细阐述...
设置图片垂直居中line-height和vertical-align的区别
weixin_45856470的博客
06-07 951
先看一个案例：
全面理解line-height与vertical-align
09-28
行高（line-height）和垂直对齐（vertical-align）是CSS中用于控制文本行间距和元素垂直位置的两个重要属性。理解这两个属性的工作原理对于进行网页设计和布局优化至关重要。 首先，让我们来深入探讨行高（line-...
css 垂直对齐 css中vertical-align属性(垂直对齐)的使用说明
12-10
在CSS布局中，垂直对齐是一项重要...在处理行内元素对齐时，务必注意元素类型以及与`line-height`、`height`和`display`属性的相互作用，同时考虑浏览器兼容性问题。通过细心调整和测试，可以实现理想的垂直对齐效果。
CSS line-height和text-align实现文本的水平居中
baidu_33163851的博客
09-22 1950
总结： 1，line-height: 100px; 只对文本有效果，对定宽高的div是没有用的。所以在文本水平垂直居中时使用。 2，在写button按钮时使用此方法较好。 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name=&qu
line-height ~ text-align 文本居中与垂直居中 | div水平垂直居中
Fanbin168的专栏
07-22 1万+
1 @{ Layout = null; } Index #nav { width: 450px; height: 40px; background-color: #808080; margin: 0 auto; }
真正的能理解CSS中的line-height，height与line-height
热门推荐
一起的远方的博客
09-20 11万+
在最近的项目中，常常用到line-height，只是简单的理解为行高但并没有深层次的理解，致使不能达到信手拈来的感觉。在此做一下总结，一是更深层次的了解什么是line-height，二是比较height与line-height的区别。 基本概念 行高与行距从字面的意思是非常容易理解的，但是对布局和样式来说，我们应该更深入的理解各个属性之间的关系，比如line-height与font-size存在什...
line-height与vertical-align之行内元素布局
webpon
08-08 641
CSS 垂直对齐vertical-align属性 在CSS中，行框的高度总是足以容纳它包含的所有行内级框，当一个行内级框 B 的高度小于包含它的行框高度时，则由vertical-align属性来决定B在行框中垂直对齐的位置。因此，vertical-align属性只对行内级元素有效，对块级元素无效。并且，该属性不能被子元素继承。 在垂直对齐时，行内非替换元素的行内级框是由 line-h...
css：( color、line-height、 text-indent、text-align、text-decoration)
qq_41504815的博客
02-26 1559
一、color : 文本颜色 color属性用于定义文本的颜色，其取值方式有如下3种： 1、预定义的颜色值，如red，green，blue等。 2、十六进制，如#FF0000，#FF6600，#29D794等。实际工作中，十六进制是最常用的定义颜色的方式。 3、RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。 需要注意的是，如果使用RGB代码的百分比颜色值，取值为0时也不能省略百分号，必须写为0%。 二、line-height : 行间距 line-height属性用
学习text-align、vertical-align和line-height
qq_41736540的博客
09-14 483
text-align和vertical-align text-align text-align属性指定元素文本的水平对齐方式。 vertical-align vertical-align设置一个元素的垂直对齐方式。 line-height 使用百分比设置行高。
input和line-height以及margin的交互
黑夜来袭Z
09-21 713
line-hegith效果: 1、存在文本子元素，并且未设置高度时，line-hegiht可以使文本元素垂直居中对齐、设置元素高度。 line-height对input的影响: 1、line-height会将input视为文本元素，并使其垂直居中，但是因为Input存在默认外边距边距(无法通过margin:0消除，可以用float消除)，所以看起来并不是居中对齐。 2、当input的父元素设置了line-height时：如果input的margin-top/bottom值小于line-height为
line-height,text-align设置文字水平垂直居中
oscar92420aaa的博客
05-28 5633
首页                             关于慕课                             新闻动态                             课程中心                             在线课程                             人才招聘   .nav_mid_le
<style> *{ margin: 0; padding: 0; } .clears{ clear: both; height: 0; overflow: hidden; font-size: 0; line-height: 0; } ul,li,ol{ list-style: none; } a{ text-decoration: none; } img{ border: none; } body{ background-color: #f5f5f5; } .box{ width: 1300px; margin: 0px auto 0px; /* background-color: #9C82E8; */ } .box_hd{ width: 1300px; height: 60px; line-height: 60px; border-bottom: 2px #000000 solid; font-size: 18px; } .title{ padding-left: 10px; float: left; } .more a{ float: right; line-height: 60px; color: #000000; } .more a:hover{ color: #ffb217; } .box_left{ float: left; margin-top: 20px; margin-left: 10px; } .phone_item{ display: block; float: left; width: 230px; height: 305px; background-color: #FFFFFF; margin: 15px 0 0 30px; margin-top: 20px; } /* 手机配图 */ .ph{ text-align: center; margin: 10px 0; } /* 手机名称 */ .phone_title{ color: #000000; text-align: center; font-size: 18px; margin-bottom: 13px; } /* 备注 */ .desc{ color: #7a7c79; font-size: 13px; text-align: center; margin-bottom: 10px; } /* 价格 */ .price{ color: #ffac38; text-align: center; margin-top: 15px; font-weight: bold; } </style>帮我改成楷体
最新发布
06-11
line-height: 0; } ul, li, ol { list-style: none; } a { text-decoration: none; } img { border: none; } body { background-color: #f5f5f5; } .box { width: 1300px; margin: 0px auto 0px;...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值