大兴网站建设公司,wordpress qq邮箱设置,微信开发 网站备案吗,寄生虫网站排名代做上一篇博文写了div 中元素居中的N种常用方法#xff0c;那么单个html元素#xff1a;div#xff08;块级元素代表#xff09;#xff0c;span#xff08;行内元素代表#xff09;中的文字如何水平垂直都居中呢#xff1f;实现方法如下#xff1a; 本文例子使用的 html… 上一篇博文写了div 中元素居中的N种常用方法那么单个html元素div块级元素代表span行内元素代表中的文字如何水平垂直都居中呢实现方法如下 本文例子使用的 html body结构下的模型如下
bodydiv classcontainer文字居中显示/div
/body 例子居中效果都如下图 注当把div 换成其他块级元素如p或h1~h6时以下方法仍然奏效。但当把div换成行内元素如span时第4种方法将失效。 1、弹性布局 设置容器项目在横轴和纵轴上都居中对齐
style.container{height: 200px;width: 200px;border: 1px solid black;background-color: aliceblue;display: flex;justify-content: center;align-items: center;}
/style 2、使用 table-cell 显示 使用 table-cell 可以实现 div 中文字的垂直居中然后在使用text-align: center可实现水平居中
style.container{height: 200px;width: 200px;border: 1px solid black;background-color: aliceblue;display: table-cell;vertical-align: middle;text-align: center;}
/style 3、使用 Grid 布局 display: grid place-items: center
style.container{height: 200px;width: 200px;border: 1px solid black;background-color: aliceblue;display: grid;place-items: center;}
/style 4、使用 line-height 设置line-height的值和为div的height值实现垂直居中使用text-align实现水平居中。该方法只能使用于单行文本如文本超过单行文字将会溢出。且该方法不适用于span等行内元素
style.container{height: 200px;width: 200px;border: 1px solid black;background-color: aliceblue;text-align: center;line-height: 200px;}
/style 当多行文字时如下
bodydiv classcontainer文字居中显示文字居中显示文字居中显示/div
/body 当用该方法用于span等行内元素时为span设置的宽高将失效因为默认情况下行内元素无法设置宽度和高度其宽度和高度都是由它们所包含的内容决定的。有关html块级元素、行内元素、行内块级元素的说明请看该篇博文HTML 块级元素、行内元素和行内块级元素
bodyspan classcontainer文字居中显示/span
/body 要想让span等行内元素也实现div的效果使用displayblock 或 displayinline-block 即可
style.container{height: 200px;width: 200px;border: 1px solid black;background-color: aliceblue;display: block; /* 把span显示变成块级元素 */text-align: center;line-height: 200px;}
/style 5、使用 text-align: center padding 使用 text-align: center 可使文字水平居中当没有固定高度时使用 padding-top 和 padding-bottom 相同高度即可实现垂直居中。当要求固定高度时先看文字的高度然后再计算出 padding-top 和 padding-bottom 相同的高度也能实现垂直居中
style/* 不限定高度时container 不设置 height 属性值使用 text-align: center padding-top、padding-bottom 相同高度*/.container{width: 200px;border: 1px solid black;background-color: aliceblue;text-align: center;padding-top:50px;padding-bottom:50px;}
/style style/* 限定高度时(如div总高度限定 200px)container 不设置 height 属性值使用 text-align: center padding-top、padding-bottom 要根据div高度减去文字高度再平分剩余的高度假如文字高度占20px,那么padding-top、padding-bottom 都是90px*/.container{width: 200px;border: 1px solid black;background-color: aliceblue;text-align: center;padding-top:90px;padding-bottom:90px;}
/style 组合上篇 div找那个元素居中和本篇html元素居中的方法综合实现子div在父div中居中显示并且子div中的文字居中
headmeta charsetutf-8 /title/titlestyle.container{height: 300px;width: 300px;border: 1px solid black;background-color: aliceblue;display: flex;justify-content: center;align-items: center;}.box{width: 150px;height: 150px;background: #55a9ff;display: flex;justify-content: center;align-items: center;}/style/head
bodydiv classcontainerdiv classbox文字居中显示/div/div
/body 注box 中可使用上述第1,第3,第4第5种方法实现组合文字居中第2种display: table-cell讲失效 以上方法如有错误请各位不吝指教如以后有别的方法将会往下继续添加各位有其他方法可留言告知。
