相对 div 内的绝对定位 firefox

发布于 2024-12-09 11:54:13 字数 347 浏览 0 评论 0原文

我在相对定位的 div 中绝对定位图像时遇到问题。图像应位于 div 的中心。为此，我使用以下 css

div
{
  position: relative;
  top: 0px;
  left: 0px;
}
div img 
{
  margin-top: -10px; /*img width is 20px*/
  position: absolute;
  top: 50%;
}

这在除 Firefox 之外的所有浏览器上都很有效。有什么解决方法吗？因为我已经对此进行了很多搜索，但我无法弄清楚。

PS：不要对我说使用行高。因为图像旁边还有文字。所以这个选项对我来说不起作用。

原文

I'm having trouble with absolute positioning an image in a relative positioned div. The image should be centered within the div. For this I use following css

div
{
  position: relative;
  top: 0px;
  left: 0px;
}
div img 
{
  margin-top: -10px; /*img width is 20px*/
  position: absolute;
  top: 50%;
}

This works great on all browsers except Firefox.
Is there any workaround for this? Because i searched already a lot for this and i can't figure something out.

PS: Don't say to me to use line-height. Because there is also text next to the image. So this option will not work for me.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

生来就爱笑 2024-12-16 11:54:13

对于您所说的图像top：50％。 50% 什么？它应该是父元素的 50%。父元素设置为什么？如果没有设置任何内容，那就是问题所在。

回复收藏 0 原文

小鸟爱天空丶 2024-12-16 11:54:13

为什么不做这样的事情

div
{
  position: relative;
  top: 0;
  left: 0;
}
div img
{
  position: relative;
  top:25%;
  left:50%;
}

图像的 relative 意味着距 div 顶部的 25% 和 50% > 对于左侧。

why not do something like this

div
{
  position: relative;
  top: 0;
  left: 0;
}
div img
{
  position: relative;
  top:25%;
  left:50%;
}

The relative for the image means 25% from the top of the div and 50% for the left side.

回复收藏 0 原文

殤城〤 2024-12-16 11:54:13

如果您只想将图像放在那里，请尝试将其作为背景图像。

div
    {
      background-image: url('image.jpg');
      background-position: center;
      background-repeat: no-repeat;
      margin: 0px auto;
      position: relative;
      width: Xpx;
      height: Xpx;
      top: 0px;
      left: 0px;
      vertical-align: middle;
    }

对于文本，在内部使用 div 并使用边距、填充或其他方式定位它。

Try putting it as a background image if you just want the image there.

div
    {
      background-image: url('image.jpg');
      background-position: center;
      background-repeat: no-repeat;
      margin: 0px auto;
      position: relative;
      width: Xpx;
      height: Xpx;
      top: 0px;
      left: 0px;
      vertical-align: middle;
    }

and for the text use a div inside and position it using margin, padding or whatever.

回复收藏 0 原文

如痴如狂 2024-12-16 11:54:13

自动边距怎么样：

div img 
{
  margin-top: -10px; /*img with is 20px*/
  display: block;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}

这在 Firefox 7 中对我有用

How about auto margins:

div img 
{
  margin-top: -10px; /*img with is 20px*/
  display: block;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}

This works for me in firefox 7

回复收藏 0 原文

私藏温柔 2024-12-16 11:54:13

这是 CSS-Tricks 上关于该主题的一篇好文章：

http://css-tricks.com/snippets/css/absolute-center-vertical-horizontal-an-image/

回复收藏 0 原文

画▽骨i 2024-12-16 11:54:13

测试一下：

div {
    position: relative;
    top: 0px;
    left: 0px;
    background: red;
    width:500px;
}
div img {
    margin-top: -10px; 
    //position: absolute; /*get it out*/
    display: block; /*Important*/
    margin: auto; /*Important*/
    top: 50%;
}

Test this:

div {
    position: relative;
    top: 0px;
    left: 0px;
    background: red;
    width:500px;
}
div img {
    margin-top: -10px; 
    //position: absolute; /*get it out*/
    display: block; /*Important*/
    margin: auto; /*Important*/
    top: 50%;
}

回复收藏 0 原文

~没有更多了~