div在设置position为absolute的情况下 如何让里面的内容水平居中显示
答案:7 悬赏:50
解决时间 2021-01-19 11:56
- 提问者网友:不爱我么
- 2021-01-19 01:23
div在设置position为absolute的情况下 如何让里面的内容水平居中显示
最佳答案
- 二级知识专家网友:何以畏孤独
- 2021-01-19 01:53
分为两种:
一、外层DIV{position:realtive}
二、内层DIV{positon:absolute;top:50%;left:50%;margin-top:-100px;margin-left:-150px;width:300px;height:200px;}
具体代码
.father{
position:realtive;
width:100%;
height:100%;}.son{
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
width: 1200px;
margin-left: -600px;
height:600px;
margin-top:-300px;}
一、外层DIV{position:realtive}
二、内层DIV{positon:absolute;top:50%;left:50%;margin-top:-100px;margin-left:-150px;width:300px;height:200px;}
具体代码
.father{
position:realtive;
width:100%;
height:100%;}.son{
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
width: 1200px;
margin-left: -600px;
height:600px;
margin-top:-300px;}
全部回答
- 1楼网友:躲不过心动
- 2021-01-19 07:04
- 2楼网友:低血压的长颈鹿
- 2021-01-19 06:54
解决这个问题之前,我们要先了解什么是position为absolute:
position属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
举例:.div {
position:absolute;
left:100px;
top:150px;
}
值得注意的是,这时候的元素是根据内容自适应大小的,所以我们要使其内部水平居中的前提是设置这个元素的大小,修改css如下:.div {
position:absolute;
left:100px;
top:150px;
width: 100px;
height: 100px;
}
然后我们再增加文本水平居中:.div {
position:absolute;
left:100px;
top:150px;
width: 100px;
height: 100px;
text-align: center;
}
这样我们就解决了“div在设置position为absolute的情况下让里面的内容水平居中显示”。
- 3楼网友:野慌
- 2021-01-19 06:12
内容水平居中显示和设置position为absolute并无太多关系,这种情况下有几种实现方式:
display: flex
仍然采用position:absolute
margin: 0 auto;
text-align
- 4楼网友:怀裏藏嬌
- 2021-01-19 04:41
假如div的宽度为200px,那么居中的方式为左浮动50%,然后再margin-left为-100px就可以了。div{
width:200px;
position:absolute;
left:50%;
margin-left:-100px;
}
- 5楼网友:撞了怀
- 2021-01-19 04:18
示例代码:
Document
adfadsf
如果里面的内容为内联元素或者文字使用:text-align:center;
如果里面的内容为区块元素:为区块设置宽度和margin:0 auto;
adfadsf
如果里面的内容为内联元素或者文字使用:text-align:center;
如果里面的内容为区块元素:为区块设置宽度和margin:0 auto;
- 6楼网友:话散在刀尖上
- 2021-01-19 02:56
这样的话 应该是水平居中的啊追问送你分了,这是我做的笔记,呵呵。追答
我要举报
如以上问答内容为低俗、色情、不良、暴力、侵权、涉及违法等信息,可以点下面链接进行举报!
大家都在看
推荐资讯