div在设置position为absolute的情况下 如何让里面的内容水平居中显示
.div{position:absolute;left:0;right:0;text-align:center}...
.div{
position:absolute;
left:0;
right:0;
text-align: center
} 展开
position:absolute;
left:0;
right:0;
text-align: center
} 展开
12个回答
展开全部
解决这个问题之前，我们要先了解什么是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的情况下让里面的内容水平居中显示”。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
您好，这个问题有两种情况。
第一种：里面内容元素为块元素，那么将此块元素css设置为：margin:0 auto;
第二种：里面内容元素为行元素，那么将此行元素的父级元素css设置为：text-align:center;
希望能够帮到您。。
第一种：里面内容元素为块元素，那么将此块元素css设置为：margin:0 auto;
第二种：里面内容元素为行元素，那么将此行元素的父级元素css设置为：text-align:center;
希望能够帮到您。。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
假如div的宽度为200px，那么居中的方式为左浮动50%，然后再margin-left为-100px就可以了。
div{
width:200px;
position:absolute;
left：50%；
margin-left:-100px;
}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div.c { width: 400px; height: 400px; background: pink; position: absolute; left: 300px; top: 500px; }
.b { width: 200px; background: black; margin:0 auto; }
</style>
</head>
<body>
<div class="c">
<div class="b">
adfadsf
</div>
</div>
</body>
</html>
如果里面的内容为内联元素或者文字使用：text-align:center;
如果里面的内容为区块元素：为区块设置宽度和margin:0 auto;
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
内容水平居中显示和设置position为absolute并无太多关系，这种情况下有几种实现方式：
display: flex
仍然采用position:absolute
margin： 0 auto；
text-align
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（10）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
