想了解如何将 div 置于容器上方以及垂直和水平上方居中,而不是页面上方。在此处引用的 fiddle 中会更有意义: https://jsfiddle.net/kylebellamy/j0h7j88a/
以容器为中心的要点是让它位于中间四列的交叉点之上,而不是以页面本身为中心。
.hexagon {
position: relative;
width: 200px;
height: 115.47px;
background-color: rgba(255, 255, 255, 0.85);
margin: 57.74px 0;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
}
.hexagon:before,
.hexagon:after {
content: "";
position: absolute;
z-index: 1;
width: 141.42px;
height: 141.42px;
-webkit-transform: scaleY(0.5774) rotate(-45deg);
-ms-transform: scaleY(0.5774) rotate(-45deg);
transform: scaleY(0.5774) rotate(-45deg);
background-color: inherit;
left: 29.2893px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
}
.hexagon:before {
top: -70.7107px;
}
.hexagon:after {
bottom: -70.7107px;
}
/*cover up extra shadows*/
.hexagon span {
display: block;
position: absolute;
top: 0px;
left: 0;
width: 200px;
height: 115.4701px;
z-index: 2;
background: inherit;
}
.outlines {
border: rgba(0, 0, 0, 1.00) 1px solid;
}
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
<div class="hexagon"><span></span>
</div>
<div class="container">
<div class="row clearfix">
<div class="col-md-6 column nopadding">
<div class="outlines" style="height: 200px;">
</div>
</div>
<div class="col-md-6 column nopadding">
<div class="outlines" style="height: 200px;">
</div>
</div>
</div>
<div class="row clearfix">
<div class="col-md-6 column nopadding">
<div class="outlines" style="height: 200px;">
</div>
</div>
<div class="col-md-6 column nopadding">
<div class="outlines" style="height: 200px;">
</div>
</div>
</div>
</div>
最佳答案
我想我明白你的意思.... https://jsfiddle.net/j0h7j88a/1/
我所做的就是添加:
.hexagon {
position: relative;
width: 200px;
height: 115.47px;
background-color: rgba(255,255,255,0.85);
margin: 57.74px 0;
box-shadow: 0 0 20px rgba(0,0,0,0.6);
/* left & transform */
left: 50%;
transform: translateX(-50%);
}
关于css - 在 Bootstrap 容器上居中(垂直和水平)Div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29989838/