如何从此flexbox居中div或其子节点中删除整个宽度?
IE中。这样:
应该是:
.main {
color: white;
background: blue;
position: relative;
height: 300px;
padding: 10px;
}
.wrapper {
display: flex;
justify-content: center;
flex-direction: column;
text-align: center;
position: absolute;
width: calc(100% - 20px);
height: calc(100% - 20px);
}
.wrapper p {
color: #000;
background: lightgrey;
}

<div class="main">
<div class="wrapper">
<p>Please press Enter to continue installation</p>
</div>
<p>Welcome to Windows 95</p>
</div>
&#13;
答案 0 :(得分:2)
您可以在margin: 0 auto
内设置p
到.wrapper
元素:
.main {
color: white;
background: blue;
position: relative;
height: 300px;
padding: 10px;
}
.wrapper {
display: flex;
justify-content: center;
flex-direction: column;
text-align: center;
position: absolute;
width: calc(100% - 20px);
height: calc(100% - 20px);
}
.wrapper p {
color: #000;
background: lightgrey;
margin: 0 auto;/*add margin 0 auto*/
}
<div class="main">
<div class="wrapper">
<p>Please press Enter to continue installation</p>
</div>
<p>Welcome to Windows 95</p>
</div>
答案 1 :(得分:1)
您可以将auto
添加到<p>
的左右边距以使其居中,并指定宽度小于100%以使其不是全宽。
.main {
color: white;
background: blue;
position: relative;
height: 300px;
padding: 10px;
}
.wrapper {
display: flex;
justify-content: center;
flex-direction: column;
text-align: center;
position: absolute;
width: calc(100% - 20px);
height: calc(100% - 20px);
}
.wrapper p {
color: #000;
background: lightgrey;
max-width: 50%;
margin: 0 auto;
}
<div class="main">
<div class="wrapper">
<p>Please press Enter to continue installation</p>
</div>
<p>Welcome to Windows 95</p>
</div>