在绝对位置的div中垂直和水平对齐锚点

塔纳索斯

在过去的一个半小时里,我一直在努力实现自己的目标。我有两个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;
}
TJ

您可以按如下方式使用绝对居中技巧

.folio-link {
  display:inline-block;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  margin:auto;
  height:0px; /* imp */
  text-align:center;
}

演示版

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

垂直和水平在div中居中div,绝对位置

来自分类Dev

在绝对位置的div中垂直对齐按钮

来自分类Dev

将Div与绝对位置垂直对齐

来自分类Dev

使用绝对位置水平和垂直居中div

来自分类Dev

css。绝对位置DIV中的垂直中心

来自分类Dev

在div中垂直和水平对齐图像

来自分类Dev

如何在放置在绝对位置的响应图像上垂直和水平居中放置文本?

来自分类Dev

绝对位置的div中的页眉,内容和页脚

来自分类Dev

在具有绝对位置的伪元素中垂直对齐

来自分类Dev

在绝对位置的div中滚动div

来自分类Dev

如何使用绝对位置和左偏移量水平居中文本 Div

来自分类Dev

与CSS垂直对齐时何时使用绝对位置与相对位置

来自分类Dev

与CSS垂直对齐时何时使用绝对位置与相对位置

来自分类Dev

在绝对位置的div中截断文本

来自分类Dev

菜单中的绝对和相对位置

来自分类Dev

响应div中的垂直和水平居中绝对文本

来自分类Dev

位置:绝对和垂直对齐:中间

来自分类Dev

垂直位置对齐:绝对

来自分类Dev

CSS:相对位置在相对位置div中的绝对位置

来自分类Dev

在div中将居中的绝对位置的图像水平居中,而不会出现水平滚动条(也在移动设备中)

来自分类Dev

如何在DIV中垂直和水平对齐SPAN

来自分类Dev

垂直和水平对齐容器中的多个div子级

来自分类Dev

如何在DIV中垂直和水平对齐SPAN

来自分类Dev

引导程序中锚点和输入组的垂直对齐

来自分类Dev

图像(绝对位置)在相对位置的容器中水平居中

来自分类Dev

居中div绝对位置?

来自分类Dev

javascript-垂直和水平居中div(位置:绝对)到屏幕视图

来自分类Dev

将div居中于左,右和绝对位置

来自分类Dev

HTML CSS Div重叠绝对和相对位置

Related 相关文章

  1. 1

    垂直和水平在div中居中div,绝对位置

  2. 2

    在绝对位置的div中垂直对齐按钮

  3. 3

    将Div与绝对位置垂直对齐

  4. 4

    使用绝对位置水平和垂直居中div

  5. 5

    css。绝对位置DIV中的垂直中心

  6. 6

    在div中垂直和水平对齐图像

  7. 7

    如何在放置在绝对位置的响应图像上垂直和水平居中放置文本?

  8. 8

    绝对位置的div中的页眉,内容和页脚

  9. 9

    在具有绝对位置的伪元素中垂直对齐

  10. 10

    在绝对位置的div中滚动div

  11. 11

    如何使用绝对位置和左偏移量水平居中文本 Div

  12. 12

    与CSS垂直对齐时何时使用绝对位置与相对位置

  13. 13

    与CSS垂直对齐时何时使用绝对位置与相对位置

  14. 14

    在绝对位置的div中截断文本

  15. 15

    菜单中的绝对和相对位置

  16. 16

    响应div中的垂直和水平居中绝对文本

  17. 17

    位置:绝对和垂直对齐:中间

  18. 18

    垂直位置对齐:绝对

  19. 19

    CSS:相对位置在相对位置div中的绝对位置

  20. 20

    在div中将居中的绝对位置的图像水平居中,而不会出现水平滚动条(也在移动设备中)

  21. 21

    如何在DIV中垂直和水平对齐SPAN

  22. 22

    垂直和水平对齐容器中的多个div子级

  23. 23

    如何在DIV中垂直和水平对齐SPAN

  24. 24

    引导程序中锚点和输入组的垂直对齐

  25. 25

    图像(绝对位置)在相对位置的容器中水平居中

  26. 26

    居中div绝对位置?

  27. 27

    javascript-垂直和水平居中div(位置:绝对)到屏幕视图

  28. 28

    将div居中于左,右和绝对位置

  29. 29

    HTML CSS Div重叠绝对和相对位置

热门标签

归档