×

div居中的方法 div居中

怎么让div居中?div中如何设置文字居中

admin admin 发表于2022-07-04 19:21:09 浏览110 评论0

抢沙发发表评论

怎么让div居中


可以用padding或margin来让div居中,比如margin:0 auto;如下案例

《div id=“wrap“》
《div》内容《/div》
《/div》

以下是样式

#wrap{
width: 150px;
height: 100px;
background-color: #A0A0A0;
}
#wrap div{
width: 50px;
height: 50px;
/*盒子居中*/
margin: 0 auto;
background-color: pink;
/*盒子内容居中*/
text-align: center;
}-div居中的方法

代码贴图

效果贴图


div中如何设置文字居中


1、可以用text-align属性设置。首先打开hbuilder编辑器,新建一个html文件,先切换到边改边看模式:

2、写一个div出来,同时在内部加上一些文字,使用css增加属性,使得div的区域看得清楚:

3、接下来就使用text-align的center属性将文字横向居中,同时设置行高,使这行文字实际占用的高度和div高度相同,就产生了居中效果:

4、如果是多行文字,需要配合行内标签p和它的padding属性来完成居中,以上就是css设置div文字居中的演示:

-div居中

怎么设置div中的内容垂直居中


有以下三种方法:

1、设置div的height和line-height值设置为相同的数值,只需要一个div即可。

2、设置父级div样式的display:table,并设置子div样式的display:table-cell、vertical-align:middle,此时需要一个父级div和一个子级div。

3、设置父级div样式为display:box、box-pack:center、box-orient:vertical,记得要在前面加上浏览器前缀,例如chrome浏览器为-webkit-box-pack:center、-webkit-box-orient:vertical,需要一个父级div和一个子级div。-div居中的方法