div 文本垂直居中

更新时间:2023-05-22 01:02:52 阅读: 评论:0

div 文本垂直居中
div 文本垂直居中:
1、vertical-align属性让文字居中
vertical-align值有很多,常用的就是middle,bottom,text-bottom等,然而真实使用的时候,我们会发现这个属性“时灵时不灵”,有些情况下我们加了这个属性之后仍然不见img或者text有任何的变化。那是因为vertical-align只作用在inline-block或者inline,还有table-cell等元素内。
示例:
<div>
<imgsrc="02.jpg"alt="">
<p>文本居中</p></div>
2、利用行高(line-height)让文字垂直居中
如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可。
示例:
p{height:30px;line-height:30px;width:100px;overflow:hidden;}
3、利用内边距(padding)让文字垂直居中
使用内边距让文字垂直居中和利用行高让文字垂直居中差不多,同样适合一行或几行文字垂直居中。
新年新示例:
p{padding:20px0;}
4、利用CSS3的transform来实现文字垂直居中
示例:
.
狗狗掉毛很厉害怎么办
center-vertical{
position:relative;
top:50%;
transform:translateY(-50%);
}.center-horizontal{
position:relative;
left:50%;
transform:translateX(-50%);
}
未来的我大同华严寺5、利用flex布局实现文字垂直居中
示例:
.flex{/*flex布局*/
关于包拯的故事
display:flex;/*实现垂直居中*/
希望用英语怎么说
全国信息化工程师align-items:center;/*实现水平居中*/
警官叔叔太凶猛justify-content:center;
text-align:justify;
width:200px;
height:200px;
background:#000;
margin:0auto;
color:#fff;
}

本文发布于:2023-05-22 01:02:52,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/fan/89/922695.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:居中   文字   垂直   实现   属性
相关文章
留言与评论(共有 0 条评论)
   
验证码:
推荐文章
排行榜
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图