在过去的一个半小时里,我一直在努力实现自己的目标。我有两个div彼此叠放,其中最上面的一个包含要在div中居中的锚点。我怎样才能做到这一点?
HTML:
<div class="browser-home">
<div class="browser-bar">
<img src="img/browser-bar.png" alt=""/>
</div>
<div class="browser-canvas">
<img src="img/a2o.png" alt=""/>
<div class="browser-hover">
<a class="folio-link" href="#">view case study</a>
</div>
</div>
CSS:
div.browser-home {position: relative;}
div.browser-home img {
display: block;
margin: 0 auto;
}
div.browser-canvas {
background: #f6f6f6;
border: 2px solid #d6d6d6;
max-width:1250px;
margin: 0 auto;
}
div.browser-canvas img {
display: block;
margin: auto;
padding: 5.6em;
}
div.browser-hover {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 900;
background: rgba(0,0,0, 0.7);
opacity: 0;
transition: opacity 0.34s ease-in-out;
border-radius: 5px 5px 0 0;
}
div.browser-canvas:hover div.browser-hover {
opacity: 1;
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句