更新时间:2023-11-21 13:05:52
Looks like you want something like float:center ? Well, the problem is that this property doesn't exist.
Here are 2 alternatives:
Set up markup like so:
<div>
<div id="wrap">Awesome content</div>
<div id="l">
<p>left text here</p>
</div>
<div id="r">
<p>right text here</p>
</div>
</div>
#wrap {
width:250px;
height: 250px;
background: yellow;
position: absolute;
top: 0;
left: 50%;
margin-left: -125px;
}
#l {
float: left;
}
#r {
float: right;
}
#l, #r {
width: 49%;
}
#l:before, #r:before {
content:"";
width: 125px;
height: 250px;
}
#l:before {
float: right;
}
#r:before {
float: left;
}
<div class="container">
<div class="exclusion">Awesome content which floats in the center</div>
<div class="dummy_text">all the text here</div>
</div>
.container {
font-size: small;
background: aqua;
position: relative;
}
.exclusion {
background-color: lime;
-ms-wrap-flow: both;
-ms-wrap-margin: 10px;
z-index: 1;
position:absolute;
left:0;right:0;
top:0;bottom:0;
width: 150px;
height: 100px;
background: yellow;
margin: auto;
}
For more info about CSS exclusion browser support and further resources see my answer here.